ansaurus

Question

jQuery Dialog Box

Answer 1

+10 A:

Looks like there is an issue with the code you posted. Your function to display the T&C is referencing the wrong div id. You should consider assigning the showTOC function to the onclick attribute once the document is loaded as well:

$(document).ready({
    $('a.TOClink').click(function(){
        showTOC();
    });
});

function showTOC() {
    $('#example').dialog({modal:true});
}

A more concise example which accomplishes the desired effect using the jQuery UI dialog is:

   <div id="terms" style="display:none;">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
   <a id="showTerms" href="#">Show Terms &amp; Conditions</a>    
   <script type="text/javascript">
       $(document).ready(function(){
           $('#showTerms').click(function(){
               $('#terms').dialog({modal:true});   
           });
       });
   </script>

carlsz 2008-12-14 16:58:30

I agree 100% with you. I think there is different way how to display the TOC in the same page. The problem is that all TOCs are being displayed because they are in a DIV statement. Is there any way how to display the DIV only when someone clicks on the link button?

David Bonnici 2008-12-14 17:09:58

See the second example that I just added.

carlsz 2008-12-14 17:30:30

David Bonnici 2008-12-14 17:46:07

Remove the style="display:none;" attribute.

carlsz 2008-12-14 18:11:27

The one by Niyaz and Rickster below works better.

knowncitizen 2010-02-11 20:17:15

Answer 2

+32 A:

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',
             autoOpen:false,
             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
     $myWindow.show(); 
     //open the dialog
     $myWindow.dialog("open");
     }

    //function to close dialog, probably called by a button in the dialog
    var closeDialog = function() {
     $myWindow.dialog("close");
    }


</script>
</head>

<body>

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

RaeLehman 2009-01-06 15:12:27

This worked for me, thanks!

Brian C. Lane 2009-06-05 21:53:02

Thanks - this solved my problem!

Matt 2009-09-01 16:36:04

+1, Nice example, helped me out.

Mark 2010-04-16 13:44:19

Answer 3

A:

This doesn't work in ie7. The dialog box doesn't show and the button doesn't work. Went back to the Jquery site. Their demo works in ie7 but cannot figure what is the difference.

2009-02-24 01:32:44

Answer 4

+6 A:

I had the same problem and was looking for a way to solve it which brought me here. After reviewing the suggestion made from RaeLehman it led me to the solution. Here's my implementation.

In my $(document).ready event I initialize my dialog with the autoOpen set to false. I also chose to bind a click event to an element, like a button, which will open my dialog.

$(document).ready(function(){

 // Initialize my dialog
 $("#dialog").dialog({
  autoOpen: false,
  modal: true,
  buttons: {
  "OK":function() { // do something },
  "Cancel": function() { $(this).dialog("close"); }
 }
 });

    // Bind to the click event for my button and execute my function
    $("#x-button").click(function(){
        Foo.DoSomething();
    });
});

Next, I make sure that the function is defined and that is where I implement the dialog open method.

var Foo = {
    DoSomething: function(){
        $("#dialog").dialog("open");
    }
}

By the way, I tested this in IE7 and Firefox and it works fine. Hope this helps!

Rickster 2009-05-27 08:20:23

Answer 5

+1 A:

If you need to use multiple dialog boxes on one page and open, close and reopen them the following works well:

 JS CODE:
    $(".sectionHelp").click(function(){
        $("#dialog_"+$(this).attr('id')).dialog({autoOpen: false});
        $("#dialog_"+$(this).attr('id')).dialog("open");
    });

 HTML: 
    <div class="dialog" id="dialog_help1" title="Dialog Title 1">
        <p>Dialog 1</p>
    </div>
    <div class="dialog" id="dialog_help2" title="Dialog Title 2">
        <p>Dialog 2 </p>
    </div>

    <a href="#" id="help1" class="sectionHelp"></a>
    <a href="#" id="help2" class="sectionHelp"></a>

 CSS:
    div.dialog{
      display:none;
    }

Jon 2010-01-14 19:02:12

Answer 6

A:

This will surely help you: http://praveenbattula.blogspot.com/2009/08/jquery-dialog-open-only-once-solution.html

Rare Solutions 2010-03-24 04:43:55

Answer 7

A:

// Increase the default animation speed to exaggerate the effect $.fx.speeds._default = 1000; $(function() { $('#dialog1').dialog({ autoOpen: false, show: 'blind', hide: 'explode' });

    $('#Wizard1_txtEmailID').click(function() {
        $('#dialog1').dialog('open');
        return false;
    });
    $('#Wizard1_txtEmailID').click(function() {
        $('#dialog2').dialog('close');
        return false;
    });
    //mouseover
    $('#Wizard1_txtPassword').click(function() {
        $('#dialog1').dialog('close');
        return false;
    });

});

/////////////////////////////////////////////////////

(Enter your Email ID here.)

////////////////////////////////////////////////////////

(Enter your Passowrd here.)

Upali 2010-04-02 18:26:17

Answer 8

A:

This is a little more concise and also allows you to have different dialog values etc based on different click events:

$('#click_link').live("click",function() {
    $("#popup").dialog({modal:true, width:500, height:800});

    $("#popup").dialog("open");

    return false;
});

bandhunt 2010-04-09 00:03:46

ansaurus

tags:

views:

answers:

jQuery Dialog Box

related questions