Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>What I do is use <a href="http://fancybox.net/" rel="nofollow">FancyBox</a> which loads the content in a iFrame, so for example I have the option in a simple page, and then open fancybox to load that page.</p> <pre><code>SetupDialogBox: function (openerClientID, width, height, effect, showCloseButton, buttonsOn, offsetHeight, onStartHandler, onCompleteHandler, onClosedHandler, refreshParentOnClose) { if (effect == null) effect = 'none'; if (width == null) width = 620; if (height == null) height = 680; if (buttonsOn == null) buttonsOn = false; if (showCloseButton == null) showCloseButton = true; if (refreshParentOnClose == null) refreshParentOnClose = false; if (offsetHeight == null) { // adjust for hight for offset based on apperence of buttons if (buttonsOn) { offsetHeight = 180; } else { offsetHeight = 140; } } var adjustedHeight = height - offsetHeight; var onStartLocal = function () { // If you want to show a loading panel, heres a good place to do it }; var onCompleteLocal = function () { $('#fancybox-frame').hide(); // If you want to hide load panel heres a good place to do it a$('#fancybox-frame').contents().find('.modalContent').css('height', height - offsetHeight + 'px'); $('#fancybox-frame').fadeIn(2000); }; $('#fancybox-frame').bind('load', function () { $('#fancybox-frame').contents().find('.modalContent').css('height', adjustedHeight + 'px'); $('#fancybox-frame').fadeIn(2000); }); }; var onClosedLocal = function () { if(refreshParentOnClose) { parent.location.reload(true); } }; $('#' + openerClientID).fancybox({ 'width': width, 'height': height, 'autoScale': false, 'transitionIn': effect, 'transitionOut': effect, 'padding': 0, 'scrolling': 'no', 'centerOnScroll': false, 'hideOnOverlayClick': false, 'showCloseButton': showCloseButton, 'type': 'iframe', 'onStart': function () { onStartLocal(); if (onStartHandler != null &amp;&amp; typeof (onStartHandler) != 'undefined') onStartHandler(); }, 'onComplete': function () { onCompleteLocal(); if (onCompleteHandler != null &amp;&amp; typeof (onCompleteHandler) != 'undefined') onCompleteHandler(); }, 'onClosed': function () { onClosedLocal(); if (onClosedHandler != null &amp;&amp; typeof (onClosedHandler) != 'undefined') onClosedHandler(); } }); }, </code></pre> <p>We then insert a link on each page which is the handler for the fancybox frame </p> <pre><code>&lt;a class="menu" href="http://www.whateverurl.com/myBox.aspx" id="menuLauncher" style="display:none;"&gt;&amp;nbsp;&lt;/a&gt; </code></pre> <p>Fire a Javascript call to setup the box </p> <pre><code>SetupDialogBox('menuLauncher', 820, 360, 'fade', false, null, null, null, null); </code></pre> <p>Then finally a call which opens the box when clicked (if its elsehwere on the page)</p> <pre><code>$("#menuLauncher").trigger('click'); </code></pre> <p>alternativly you could just make the menuLauncher visible and use that as a opening link. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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