Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You will need a div to cover the entire window.</p> <p>This will not be enough though since a user might still use the keyboard to navigate in the background. You would have to iterate all the a/input/button/select elements on the page and add an tab-index attribute set to -1. When you hide the pop-up they should remove the 'tab-index' attribute.</p> <p>The reason for the tab-index manipulation is also one of accessibility. A user that navigates through the keyboard will have a hard time navigating content inside of your pop-up if you let them navigate in the background.</p> <p>So, how would we go about constructing this? Just to set you off:</p> <p>Html:</p> <pre><code>&lt;div id="popup" class="popup"&gt; &lt;div class="cover"&gt;&lt;/div&gt; &lt;div class="popupBody"&gt; ... &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Css:</p> <pre><code>.popup { background-color:black;display:none; position:fixed; left:0;right:0;top:0;bottom:0; z-index:3000; opacity:0.5; } </code></pre> <p>js+ jQuery for adding tabindex:</p> <pre><code>$('input, a, button, select').each(function () { $(this).attr('tabindex', '-1'); }); </code></pre> <p>Note: Here the popup is the 'cover', with popupBody being the actual popup, uggly but working jsfiddle: <a href="http://jsfiddle.net/mjfag/1" rel="nofollow">http://jsfiddle.net/mjfag/1</a></p> <p><strong>An alternative would</strong> be to use the JQuery UI module for modal dialogues. That does nothing for the keyboard-navigation though but if that is of no concern all the other stuff is already done for you.</p> <p>Edit: After some quick testing with a newer version of jQuery UI it seems like they've started handling the keyboard to.</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