Member Avatar for jj.amonit

Can anyone help me figure out why my dialog won't go away when clicking the x? When I click it with modal = true, the modal portion disappears, but the dialog remains. With it off, the dialog still remains. I have tried multiple things, but it won't go away. I have tried cancel buttons... nothing.

I need a way to click something to get the dialog to appear, and a way for it to disappear if the user wants it to.

<link type="text/css" href="css/cupertino/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script>
    $.fx.speeds._default = 1000;
    $(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );   // increase the default animation speed to exaggerate the effect
        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
            modal: "true"
        });

        $( "#opener" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            return false;
        });
    });
    </script>

<div id="dialog" title="title"><h1>dialog title</h1></div>dialog text<button id="opener">Add a Budget</button>

If you need more info, just let me know what you need.

thks

JJ

Edited by Dani because: Not a code snippet
  • 4 Contributors
  • 4 Replies
  • 3K Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by fobos
Member Avatar for simplypixie

Not sure, but try something like (basically you need to use remove as well) this:

$('#dialog').dialog({
    modal: true,
    hide: "explode",
    show: "blind",
    close: function(event, ui) { 
        $(this).dialog('destroy').remove();
    }
});
Member Avatar for jj.amonit

I have tried your suggestion, but it still will not go away. I have posted the whole code below. I am going nuts over this.
I am using the instructions from the JQueryui website.

<!DOCTYPE html>
<html>
<head>
<meta  charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
<link type="text/css" href="css/cupertino/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />  
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script>
       // increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 1000;
    $(function() {
        $( "#dialog" ).dialog({
            modal: true,
            hide: "explode",
            show: "blind",
            close: function(event, ui) {
                $(this).dialog('destroy').remove();
            }
       });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });
});
</script>
</head>
<body>
<div class="demo">
    <div id="dialog" title="Basic dialog">
        <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
<button id="opener">Open Dialog</button>
</div>
</body>
</html>
Member Avatar for crozover

Not sure, but try something like (basically you need to use remove as well) this:

Hi, put css :

<style>
    .ui-dialog .ui-dialog-titlebar-close{
        display: none;
    }
</style>
Edited by diafol because: apply code tags
Member Avatar for fobos

Also, why are you referencing two jquery links? you have 1.3.1 and 1.4.4

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.