Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I suffered a similar issue: in my modal window, I have two buttons, "Cancel" and "OK". Originally, both buttons would close the modal window by invoking <code>$('#myModal').modal('hide')</code> (with "OK" previously executing some code) and the scenario would be the following:</p> <ol> <li>Open the modal window</li> <li>Do some operations, then click on "OK" do validate them and close the modal</li> <li>Open the modal again and dismiss by clicking on "Cancel"</li> <li>Re-open the modal, click again on "Cancel" ==> the backdrop is no longer accessible!</li> </ol> <p>well, my fellow next desk saved my day: instead of invoking <code>$('#myModal').modal('hide')</code>, give your buttons the attribute <code>data-dismiss="modal"</code> and add a "click" event to your "Submit" button. In my problem, the HTML (well, TWIG) code for the button is:</p> <pre><code>&lt;button id="modal-btn-ok" class="btn" data-dismiss="modal"&gt;OK&lt;/button&gt; &lt;button id="modal-btn-cancel" class="btn" data-dismiss="modal"&gt;Cancel&lt;/button&gt; </code></pre> <p>and in my JavaScript code, I have:</p> <pre><code>$("#modal-btn-ok").one("click", null, null, function(){ // My stuff to be done }); </code></pre> <p>while no "click" event is attributed to the "Cancel" button. The modal now closes properly and lets me play again with the "normal" page. It actually seems that the <code>data-dismiss="modal"</code> should be the only way to indicate that a button (or whatever DOM element) should close a Bootstrap modal. The <code>.modal('hide')</code> method seems to behave in a not quite controllable way.</p> <p>Hope this helps!</p>
 

Querying!

 
Guidance

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