Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can create a custom wrapper and add the class <strong>.highslide-move</strong> together with the class <strong>.highslide-html-content</strong>. Tie the custom wrapper to your popup using <a href="http://highslide.com/ref/hs.contentId" rel="nofollow">contentId</a>. See this demo: <a href="http://jsfiddle.net/WbDMs/" rel="nofollow">http://jsfiddle.net/WbDMs/</a> (see code from the jsFiddle below)<br /> Note that you can’t move the popup from the outline graphic file (I’m using a black outline in my demo).</p> <p>If you have a live page, I can take a look at it to see what you are missing. <br /><br /><br /> <strong>Code from the jsFiddle</strong><br /> In the head section:</p> <pre><code>&lt;script type='text/javascript' src="highslide/highslide-with-html.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="highslide/highslide.css"/&gt; &lt;script type='text/javascript'&gt; //&lt;![CDATA[ hs.graphicsDir = 'highslide/graphics/'; hs.outlineType = 'rounded-black'; hs.wrapperClassName = 'draggable-header'; hs.showCredits = false; //]]&gt; &lt;/script&gt; &lt;style type='text/css'&gt; /* adjust the wrapper's padding */ .highslide-html-content { padding: 0 10px 10px 10px; } /* for demo purposes only */ .highslide-body { background: yellow } &lt;/style&gt; </code></pre> <p>In the body section <br />(<em>replace /roadrash/7AHX9/show/light/ in the href with the page you want to open in your iframe popup</em>):</p> <pre><code>&lt;div&gt; &lt;a href="/roadrash/7AHX9/show/light/" onclick="return hs.htmlExpand(this, { objectType: 'iframe', contentId: 'highslide-html' } )"&gt; Content in iframe &lt;/a&gt; &lt;/div&gt; &lt;div class="highslide-html-content highslide-move" id="highslide-html"&gt; &lt;div class="highslide-header"&gt; &lt;ul&gt; &lt;li class="highslide-close"&gt; &lt;a href="javascript:;" onclick="return hs.close(this)" style="cursor: pointer;"&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="highslide-body"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>
 

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