Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The following should provide what your looking for. However would need to consider issues such as same origin policy for the XHR 'load' call.</p> <p>See example at: <a href="http://jsfiddle.net/qeXea/2/" rel="nofollow">http://jsfiddle.net/qeXea/2/</a><br> <strong>Note:</strong> Due to same origin policy the iframe isn't able to populate with the content, simply setup your own page on your website and use your own urls to view.</p> <p>HTML</p> <pre><code>&lt;a href="http://www.yoururl.com" onclick="launchUrl(this); return false;"&gt;Click Here&lt;/a&gt; &lt;div id="fade"&gt;&lt;/div&gt; &lt;iframe id="dialog" src=""&gt;&lt;/iframe&gt; &lt;script type="text/javascript"&gt; function launchUrl(owner) { $('#fade').show(); var link = $(owner).attr('href'); $('#dialog').load(link, function(response) { $('#dialog').show(); }); } &lt;/script&gt; </code></pre> <p>CSS</p> <pre><code>#fade { top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; position: absolute; background-color: rgba(255, 255, 255, 0.5); } #dialog { top: 100px; left: 100px; width: 200px; height: 200px; z-index: 101; display: none; position: absolute; } </code></pre> <hr> <p>Alternative</p> <p>HTML</p> <pre><code>&lt;a href="" onclick="launchUrl('http://www.yoururl.com'); return false;"&gt;Click Here&lt;/a&gt; &lt;div id="fade"&gt;&lt;/div&gt; &lt;iframe id="dialog" src=""&gt;&lt;/iframe&gt; &lt;script type="text/javascript"&gt; function launchUrl(link) { $('#fade').show(); $('#dialog').load(link, function(response) { $('#dialog').show(); }); } &lt;/script&gt; </code></pre>
    singulars
    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.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      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