JSFiddle - React, Tailwind, and code Playground

by roadrash

HTML

<script src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<div>
    <a href="http://fiddle.jshell.net/roadrash/7AHX9/show/light/" onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 200, height: 200})">
        Open iframe
    </a>
</div>

CSS

.highslide-body iframe {
    /* for this demo */
    outline: 2px solid red;
    /* use this in your live page 
    outline: none; 
    */
}

JavaScript

// set focus to highslide-body in HTML popups

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';

// set focus to the iframe - requires jQuery included in the head of the page
hs.Expander.prototype.onAfterExpand = function() {
    $(this.content).find('.highslide-body iframe').attr('tabindex', -1).focus();
};