Javascript – jQuery Dialog Box


Im trying to do a dialog box with jquery. In this dialog box Im going to have terms and conditions. The problem is that the dialog box is only displayed for the FIRST TIME.

This is the code.


function showTOC()
        modal: true, 
        overlay: { 
            opacity: 0.7, 
            background: "black" 

HTML (a href):

<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>

<div id="example" title="Terms & Conditions">1..2..</div>

The problem I think is that when you close the dialog box the DIV is destroyed from the html code therfore it can never be displayed again on screen.

Can you please help!


Best Solution

I encountered the same issue (dialog would only open once, after closing, it wouldn't open again), and tried the solutions above which did not fix my problem. I went back to the docs and realized I had a fundamental misunderstanding of how the dialog works.

The $('#myDiv').dialog() command creates/instantiates the dialog, but is not necessarily the proper way to open it. The proper way to open it is to instantiate the dialog with dialog(), then use dialog('open') to display it, and dialog('close') to close/hide it. This means you'll probably want to set the autoOpen option to false.

So the process is: instantiate the dialog on document ready, then listen for the click or whatever action you want to show the dialog. Then it will work, time after time!

<script type="text/javascript"> 
        jQuery(document).ready( function(){       
            jQuery("#myButton").click( showDialog );

            //variable to reference window
            $myWindow = jQuery('#myDiv');

            //instantiate the dialog
            $myWindow.dialog({ height: 350,
                width: 400,
                modal: true,
                position: 'center',
                title:'Hello World',
                overlay: { opacity: 0.5, background: 'black'}

    //function to show dialog   
    var showDialog = function() {
        //if the contents have been hidden with css, you need this
        //open the dialog

    //function to close dialog, probably called by a button in the dialog
    var closeDialog = function() {



<input id="myButton" name="myButton" value="Click Me" type="button" />
<div id="myDiv" style="display:none">
    <p>I am a modal dialog</p>