StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You are using a non-unique id. It will only ever give you the first one.</p> <pre><code><a href="#" class="button" data-modal="1">Click 1</a> <div id="modal"> <div id="heading">Content form 1</div> </div> <a href="#" class="button" data-modal="2">Click 2</a> <div id="modal"> <div id="heading">Content form 2</div> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jquery.reveal.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.button').click(function (e) { // Button which will activate our modal $('#modal' + $(this).data('id')).reveal({ // The item which will be opened with reveal animation: 'fade', // fade, fadeAndPop, none animationspeed: 600, // how fast animtions are closeonbackgroundclick: true, // if you click background will modal close? dismissmodalclass: 'close' // the class of a button or element that will close an open modal }); return false; }); }); </script> </code></pre> <p>Observer how:</p> <ol> <li>I added a number behind each of your modal id's.</li> <li>How I added an attribute called "data-id" to each link with the corresponding number we want.</li> <li>How I used jQuery's wonderful data() method to get that corresponding number.</li> </ol> <p>The advantage of this method is that the links can be moved to wherever they need to be without needing to change the internals of the click event. Aka we do not need to do DOM searching via <code>.next()</code>, <code>.parent()</code>, <code>.find()</code> etc.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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