Question

So I want my users to be able to click a link in a simple modal jquery box and have it close the current modal box and open a new one with new content.

So far this has not worked:

$('#search_dialog_link').click(function () {
        $("#search_dialog").modal(
            {
                position: [150,125],
                minWidth: 400
            }
    );
});    

$('#create_course_link').click(function() {
   $.modal.close();
   $('#add_course_dialog').modal(
       {
        position: [150,125],
        minWidth: 400
       }
    );
});

Where #search_dialog_link, #create_course_link, #search_dialog, and #add_course_dialog are established this way:

<div id="default-content">
This is the page where all of your classes and a list of upcoming assignments will be displayed.
Since you do not have any classes, why not try to add one by clicking the link below.<br><br>
<center><div id="search_dialog_link">+Add a Course</div></center>
</div>
</div>
<div id="search_dialog">
<p>Search for the teacher of your class:</p>
<form id="searchform"><input type="text" width="200px" size="30" value="" id="inputString" />
<div style="font-size: 10; position:relative; bottom:20px; left: 200px;">Dont see it?<div id="create_course_link">Create</div> a new class.</div>
</form>
</div>
<div id="add_course_dialog">
<p>Test</p>
</div>

Note that the #search_dialog box opens correctly and when the user clicks the div #create_course_link the original modal box closes. But the new modal box does not display. What am I doing wrong?

Answer 1

There is a “bug” with v1.4.1 that is probably causing the issue. To fix an Opera issue, there is a setTimeout call in the close function.

To work around it, you could update your code as follows:

$('#create_course_link').click(function() {
   $.modal.close();

   setTimeout(function () {
      $('#add_course_dialog').modal(
      {
       position: [150,125],
       minWidth: 400
      }
      );
   }, 20);
});