开发者

Click Link in simple modal to open new simple modal

开发者 https://www.devze.com 2023-02-08 14:03 出处:网络
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 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 cla开发者_高级运维sses 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?


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);
});


Eric's answer should work since he developed the thing himself. HOWEVER, that would make the simple modal to disappear and a new one to open. That might not be desirable.

I ran into that situation in my early usage of the simpleModal since I am a crazy architect (I do not consider myself a programmer but have been able to put 2 & 2 together).

To work around it, create a global variable and a global array. Use the global variable as the pointer to the screen and the global array as the contents of the "overlay". That way you will be able to navigate back and fourth without needing to close the modal.

This was my early implementation of screen-ning in the early days of Clipper (remeber it?). I used it with Pascal Programming (yes, I was a Pascal programmer ... but abandoned it).

Take a look here: http://clubetititi.com. It is in Portuguese but you should have no troubles navigating around.

Good luck!


This seems to have been fixed in simplemodal 1.4.2, I suggest upgrading.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号