Databases
StackOverflow2013
Postsdbo
POSimplemodal for JQuery: close currently visible modal and show another
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSimplemodal for JQuery: close currently visible modal and show another
    primarykey
    data
    text
    <p>I realize this question has been asked <a href="https://stackoverflow.com/questions/2718593/jquery-simplemodal-close-existing-modal-and-open-a-new-one">several times</a> in <a href="https://stackoverflow.com/questions/2587892/jquery-simplemodal-call-another-simplemodal">several different forms</a>, but I cannot get it to work properly for the life of me.</p> <p>I have two DIVs on my page used for modals, ids signup-popup and login-popup. They each have their own close buttons with class simplemodal-close and showing/closing each one on its own works fine.</p> <p>I want to add a button to the signup modal that closes it and opens the login modal. I followed the instructions Eric gave in the first link above, which I've included below:</p> <pre><code>$('a#ask').click(function(){ $('#modal-contact').modal({onShow: function (dialog) { // handle the close yourself. // Don't use the closeClass on this element // call $.modal.close(); when you are done // call a function to open a new modal }); return false; }); </code></pre> <p>However, this doesn't work; the signup modal closes but the login modal doesn't. Here is my code (using noConflict, hence the use of jQuery() rather than $()):</p> <pre><code>jQuery(function (jQuery) { jQuery('#btn-signup-open').click(function () { jQuery('#signup-popup').modal({onShow: function (dialog) { jQuery('#login-from-signup').click(function () { jQuery.modal.close(); jQuery('#login-popup').modal(); }) }}); return false; }); }); </code></pre> <p>And I also tried the following instead, figuring it was simpler and more straightforward, however the result was the same (signup modal closes, login modal doesn't close, regular close button &amp; form submit works fine):</p> <pre><code>jQuery(function (jQuery) { jQuery('#login-from-signup').click(function () { jQuery.modal.close(); jQuery('#login-popup').modal(); return false; }); }); </code></pre> <p>I did try Eric's other suggestion which was to just replace the content of the modal. This works, but seems hack-y because I have to manually bind the close button (not a big deal) and the modal doesn't auto-resize for the smaller login form. While this works, it seems like there should be a better way to do it (specifically the code I have right above, or some minor tweak to it).</p> <pre><code>jQuery(function (jQuery) { jQuery('#login-from-signup').click(function () { jQuery('.simplemodal-wrap').html('&lt;div class="popup simplemodal-data" id="login-popup" style="display: block;"&gt;'+jQuery("#login-popup").html()+'&lt;/div&gt;'); jQuery('.simplemodal-close').click(function() {jQuery.modal.close(); return false;}); return false; }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USswrobel
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSimplemodal for JQuery: close currently visible modal and show another
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload