JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<p><input type="button" value="Popup!" id="popup__toggle" /></p>
<!--[if lt IE 9]><div class="popup__overlay popup__overlay_ie"></div><![endif]-->
<div class="popup__overlay">
    <div class="popup">
        <a href="#" class="popup__close">X</a>
        <h2>Welcome!</h2>
        <p>Please enter your login and password to continue Please enter your login and password to continuePlease enter your login and password to continuePlease enter your login and password to continuePlease enter your login and password to continuePlease enter your login and password to continuePlease enter your login and password to continuePlease enter your login and password to continuePlease enter your login and password to continue</p>
        <div class="popup-form__row">
            <label for="popup-form_login">Login</label>
            <input type="text" id="popup-form_login" value="" />
        </div>
        <div class="popup-form__row">
            <label for="popup-form_password">Password</label>
            <input type="password" id="popup-form_password" value="" />
        </div>
        <input type="button" value="Log in" />
    </div>
    <!--[if lt IE 9]><div class="popup__valignfix"></div><![endif]-->
</div>

CSS

html {
    min-height: 100%
    }
body {
    min-height: 100%;
    background: #fff;
    font: 14px/125% Tahoma;
    }
p {
    margin: 1em 0;
    text-align: center
    }
.popup__overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    text-align: center
    }
    .popup__overlay:after {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        height: 100%;
        width: 0;
        vertical-align: middle;
        content: ''
        }
    /* Added for IE<9 compatibility */
    .popup__overlay_ie {
        background: #000;
        opacity: .7;
        filter: alpha(opacity=70)
        }
.popup {
    max-width:90%;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    padding: 20px;
    border: 5px solid #fff;
    border-radius: 15px;
    box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4);
    background: #fff;
    vertical-align: middle
    }
/* Added instead of :after pseudoelement */
.popup__valignfix {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 0;
    height: 100%;
    vertical-align: middle
    }
.popup-form__row {
    margin: 1em 0
    }
label {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 120px;
    text-align: left
    }
input[type="text"], input[type="password"] {
    margin: 0;
    padding: 2px;
    border: 1px solid;
    border-color: #999 #ccc #ccc;
    border-radius: 2px
    }
input[type="button"] {
    padding: 6px 16px;
    border: 0;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
    box-shadow:         inset 0 1px 1px rgba(255,255,255,.3);
    cursor: pointer;
    background: #444;
    background: -webkit-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
    background:    -moz-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
    background:    ...

JavaScript

p = $('.popup__overlay')
$('#popup__toggle').click(function() {
    p.css('display', 'block')
})
p.click(function(event) {
    e = event || window.event
    if (e.target == this) {
        $(p).css('display', 'none')
    }
})
$('.popup__close').click(function() {
    p.css('display', 'none')
})