JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<input type="text" id="name" value="hello"/><span>pdf</span>

CSS

html, body, overlay { width:100%; height:100%, margin:0, padding:0; }
body { background:#dfffdf; }

span { cursor:pointer; }

#overlay {
    position:absolute;
    top:0; left:0;
    background:rgba(192,192,192,0.82);
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    z-index:1000;
}

#overlay > div {
    position:absolute;
    top:32px;
    right:32px;
    cursor:pointer;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAByFBMVEWpODWWJCWSHyKlNDKzODa7Qj2pLi/sxL/rwLyfJCjourjtx8H14N3cqq6jJyrEU03OZFm1OznRbF/gq6/24d+vNTTjq6/IVkv24+C1SE+9SFHDSFPHSFTUdGblq7DuysT35OHMTlfSaGrKSFXWe2zOY1jVeG/35uPtxb3ZhHPy1djEMz3DLDrz19nCLDvHQ0TLVE3or7Lnq7H02trqvLnnsKzlqp7LSFX34+Xah3vcjYDelYfptbXgm43nsKTuyMLwzsjvy8Xx0cvz2NLrvrP9+fjlqpzx0sry1c7jopT9+PeYFyGjGCS0Pj21QkGOGx+jKS26TUWmGCWeGCOSFx+3R0WtJCurGCavLTCsHCipGCaqGCa4S0mxNTa5R0C0PTy+RT+5Wl/68fK6T03NdmzDc3r89vW2UVbJamD99/a7VFLz1djnq7Dmq7C8Ymi8WVa+XVy6XWLZmZPEdn3WkorZg3r13tz78fLLWk7YpquZHSPOY1XRa1y/Hi2+Hi7Tc2PWfGq7Hi3AJTDZhHK1HivDNjjcjHuuHinHSEGlHSbfloS+XFvEcXHLWE3gmYjvx7vaiHbsva/VeGfQaFnos6TlqJjin47///8A4P9hAAABgklEQVR42n3T+yNTcRjH8SehQrpJlEuhmy4IkZJrbpv7dRtjRpvZZhtTJ7JqTUi5e/7dzuf5zvrFzuuX8/5+np8PMWv+3XP5NWbi5dBeEqFlJm3lIKkVjYLHBoIUODEQoKVTA0vk2YF25k4J0fGB2yQ85NwE1nUhoLtHf71HOWkyCgytUdG4gMdr5CSNfoMnDM3It3J9/BQ9Sn0RUczQEok0fETcL5O1j3rXlUyGpjdyzStUYy8NDK4plzgh56aaBgdopD/lov3OZ91ljsu6jqedLvSPkOkLXElPTZvJYLF6bebG7WyZTTS8nZDP4ur/ZZjMv87cnWXlVmIy09DPuHtyFbln2xBZvysFn3Ao9zEUxUcr2TZEqVwXX268YvCp1UbjX6FOXZ/r6WXwyjxOlh9Qj+nFM+kqhgdIC43FAEN1RUx5h1cJaowmtqCWebUSIWr0l8QETf0R4fBDFeJRWH2naPrIwDS5Dg24SHPvJ+XWiOfn/iYxN8/4BR2/z+XQmP8BFqrAmogYa20AAAAASUVORK5CYII=);

}

#overlay > iframe, #overlay > object {
    width:100%;
    height:100%;
    margin:0;
    padding:0;    
}

JavaScript

$.fn.overlay = function(){
    var $o = $(this), $w = $(window), $body = $("body"); 
    $o.on('init',function(e,c,update){
        $o.overlay = { content:$(c),update:update,$boom:$("<div/>").on("click",function(){ $o.trigger('close'); }) };
        $o.append($o.overlay.content).append($o.overlay.$boom);
    }).on('refresh',function(){
        var css = { position:"absolute" };
        var wwidth  = $w.width();
        var wheight = $w.height();
        var width = Math.min(wwidth*0.80,800);
        var height = Math.min(wheight*0.80,800);
        css.left = ( (wwidth  - width) /2 );
        css.top  = ( (wheight - height)/2 );
        $o.overlay.$boom.css({right:(css.left-32)+"px",top:(css.top+8)+"px"});
        css.left += "px";
        css.top += "px";
        $o.overlay.content.css(css).width(width).height(height);
        
    }).on('open',function(e,url){
        $o.overlay.update( $o.overlay.content,url );
        $o.css({opacity:0.1}).appendTo($body).animate({opacity:1},800).trigger("refresh");
    }).on('close',function(){
        $o.animate({opacity:0},600,function(){ $o.detach(); });
    });
    
    $w.on("resize",function(){ $o.trigger("refresh"); }); return this;
};

var $overlay = $('<div/>',{id:"overlay"}).overlay();
$overlay.trigger('init',[$('<iframe/>',{src:'about:blank'}),function($t,d){ $t.attr("src",d); }]);
//$overlay.trigger('init',[$('<object/>',{type:'text/html',codetype:'application/pdf'}),function($t,d){ $t.attr("data",d); }]);

var $name = $("#name");
$name.next().on("click",function(){
    var name = $name.val(); if(name === 'hello') name='world';
    var url = "http://demo.html2pdf.fr/examples/exemple09.php?make_pdf&nom="+encodeURIComponent(name);
    $overlay.trigger('open',url)
});