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 class="highslide history" href="http://roadrash.no/hs-support/include-short-1x.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe', wrapperClassName: 'draggable-header' } )">
        Content in iframe
    </a>
</div>

CSS

.highslide-history {
    position: absolute;
}
.highslide-history a {
    padding: 0 5px 0 0;
    color: silver;
}

JavaScript

// iframe popup with history.go();

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.creditsPosition = 'bottom left';
hs.preserveContent = false;

// Add history.go(); to top left corner of the popup
hs.Expander.prototype.onBeforeExpand = function() {
	if (/history/.test(this.a.className)) this.createOverlay({
	html: '<div class="highslide-header highslide-history"><ul><li><a href="#" title="Back" onclick="history.go(-1);return false">&lt;&lt;</a></li><li><a href="#" title="Forward" onclick="history.go(+1);return false">&gt;&gt;</a></li></ul></div>',
	position: 'top left',
	fade: 2, 
	opacity: 1.0
	});
};