JSFiddle - React, Tailwind, and code Playground

by NicosKaralis

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<center>  
    <a href="http://www.yensdesign.com">
        <img src="logo.jpg" alt="Go to yensdesign.com"/>
    </a>  
    <div id="button">
        <input type="submit" value="Press me please!" />
    </div>
</center>
<div id="popupContact">  
    <a id="popupContactClose">x</a>  
    <h1>Title of our cool popup, yay!</h1>  
    <p id="contactArea">  
        Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...  
        <br/><br/>  
        We can use it for popup-forms and more... just experiment!  
        <br/><br/>  
        Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!  
        <br/><br/>  
        <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>  
    </p>  
</div>  
<div id="backgroundPopup"></div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  
    border:0pt none;  
    font-family:inherit;  
    font-size:100%;  
    font-style:inherit;  
    font-weight:inherit;  
    margin:0pt;  
    padding:0pt;  
    vertical-align:baseline;  
}  
body{  
    background:#fff none repeat scroll 0%;  
    line-height:1;  
    font-size: 12px;  
    font-family:arial,sans-serif;  
    margin:0pt;  
    height:100%;  
}  
table {  
    border-collapse:separate;  
    border-spacing:0pt;  
}  
caption, th, td {  
    font-weight:normal;  
    text-align:left;  
}  
blockquote:before, blockquote:after, q:before, q:after {  
    content:"";  
}  
blockquote, q {  
    quotes:"" "";  
}  
a{  
    cursor: pointer;  
    text-decoration:none;  
}  
br.both{  
    clear:both;  
}  
#backgroundPopup{  
    display:none;  
    position:fixed;  
    _position:absolute; /* hack for internet explorer 6*/  
    height:100%;  
    width:100%;  
    top:0;  
    left:0;  
    background:#000000;  
    border:1px solid #cecece;  
    z-index:1;  
}  
#popupContact{  
    display:none;  
    position:fixed;  
    _position:absolute; /* hack for internet explorer 6*/  
    height:384px;  
    width:408px;  
    background:#FFFFFF;  
    border:2px solid #cecece;  
    z-index:2;  
    padding:12px;  
    font-size:13px;  
}  
#popupContact h1{  
    text-align:left;  
    color:#6FA5FD;  
    font-size:22px;  
    font-weight:700;  
    border-bottom:1px dotted #D3D3D3;  
    padding-bottom:2px;  
    margin-bottom:20px;  
}  
#popupContactClose{  
    font-size:14px;  
    line-height:14px;  
    right:6px;  
    top:4px;  
    position:absolute;  
    color:#6fa5fd;  
    font-weight:700;  
   ...

JavaScript

//SETTING UP OUR POPUP  
//0 means disabled; 1 means enabled;  
var popupStatus = 0;


//loading popup with jQuery magic!

function loadPopup() {
    //loads popup only if it is disabled  
    if (popupStatus == 0) {
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//disabling popup with jQuery magic!  

function disablePopup() {
    //disables popup only if it is enabled  
    if (popupStatus == 1) {
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//centering popup  

function centerPopup() {
    //request data for centering  
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering  
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight / 2 - popupHeight / 2,
        "left": windowWidth / 2 - popupWidth / 2
    });
    //only need force for IE6  
    $("#backgroundPopup").css({
        "height": windowHeight
    });
}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function() {

    //LOADING POPUP
    //Click the button event!
    $("#button").click(function() {
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    });

    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function() {
        disablePopup();
    });
    //Click out event!
    $("#backgroundPopup").click(function() {
        disablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e) {
        if (e.keyCode == 27 && popupStatus == 1) {
            disablePopup();
        }
    });

});