StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If I understood you correctly you want to display a popup and prevent user from accessing rest of the page.</p> <p>If this is true then this can be easily done with 2 additional popup attributes.</p> <p><strong><code>data-overlay-theme="a"</code></strong> will create an overlay over whole page so only popup will be accessable.</p> <p><strong><code>data-dismissible="false"</code></strong> will prevent popup closure when clicked outside of it. Basically only way to close it now is programatically. </p> <p>Working example: <a href="http://jsfiddle.net/Gajotres/aJChc/" rel="nofollow">http://jsfiddle.net/Gajotres/aJChc/</a></p> <pre><code><div data-role="popup" id="toc" data-overlay-theme="a" data-dismissible="false"></div> </code></pre> <p><strong>EDIT :</strong> </p> <p>Next working example: <a href="http://jsfiddle.net/Gajotres/aJChc/" rel="nofollow">http://jsfiddle.net/Gajotres/aJChc/</a></p> <p>This code example will prevent body scrolling when popup is opened. Scrolling will ba enabled again when popup is closed.</p> <pre><code>$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) { $('body').css('overflow','hidden'); }).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) { $('body').css('overflow','auto'); }); </code></pre> <p>And this is your example with my code: <a href="http://jsfiddle.net/Gajotres/HesVd/13/" rel="nofollow">http://jsfiddle.net/Gajotres/HesVd/13/</a></p> <p>Label width fix:</p> <pre><code>.ui-input-text { width: 100% !important; } </code></pre>

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