JSFiddle - React, Tailwind, and code Playground

POPUP

by web-nfo.com

HTML

<div style="height:200px;">&nbsp;</div> 

<a class="toolablyPopup" href="http://getbootstrap.com/" rel="min-width=300:min-height=500:max-width=700:max-height=300:side-padding=10" >Click here to open the IFRAME popup</a>

<div style="height:2000px;">&nbsp;</div>

CSS

#toolablyPopupOverlay {
    background-color:#878787;
    position:fixed;
    z-index:0;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    padding:20px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAMFBMVEX///8HBwcICAgUFBQXFxcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABuanbkAAAAQUlEQVR4nOzOoQ0AIBDF0K5QNiC3wYUN2H8nJPkai6l5prSOdcPU2jckN8mTZEmWZEmW5EFy8f+e/g4AAAD//wMAKnM4yCLdBHkAAAAASUVORK5CYII=');
}
#toolablyPopupButtonClose {
    background-image:...

JavaScript

jQuery.fn.extend(
{
    toolablyPopup: function(options)
    {
		var settings = jQuery.extend(
		{
			delayTimeHide: 500,
            delayTimeMove: 50,
            speedTimeMove: 200,
            screenPadding: 0,
            minHeight: 50,
            minWidth: 100,
            maxHeight: 4800,
            maxWidth: 5760,
            iframeHeight: 600,
            iframeWidth: 900,
            idPopupOverlay:      'toolablyPopupOverlay',
            idPopupButtonClose:  'toolablyPopupButtonClose',
            idPopupWrapper:      'toolablyPopupContentWrapper',
            idPopupContent:      'toolablyPopupContent',
            idPopupContentIframe:'toolablyPopupContentIframe'
		}, options);
        
        var centerPopup = function(settings, animate)
        {
            $window = jQuery(window);
            $popupWrapper = jQuery('#' + settings.idPopupWrapper);
            
            var windowWidth = $window.outerWidth();
            var windowHeight = $window.outerHeight();
            var screenWidth = $window.innerWidth();
            var screenHeight = $window.innerHeight();
    
            var screenPadding = Math.abs(settings.screenPadding + 70);
            if(screenWidth < 640) { // Small screen = small padding
                var screenPadding = 50;
            }
    
            var newContentWidth = screenWidth - screenPadding;
            if(newContentWidth > settings.maxWidth) {
                newContentWidth = settings.maxWidth;
            }
            if(newContentWidth < settings.minWidth) {
                newContentWidth = settings.minWidth;
            }
    
            var newContentHeight = screenHeight - screenPadding;
            if(newContentHeight > settings.maxHeight) {
                newContentHeight = settings.maxHeight;
            }
            if(newContentHeight < settings.minHeight) {
                newContentHeight = settings.minHeight;
            }

            $popupWrapper.css({width:newContentWidth,...