JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<link href="http://www.altegrosky.su/css/style.css" rel="stylesheet" type="text/css">

<div class="callmepleace-show-toggle">Хочиш я тибе пазвоню?<br>
    Только я должен знать как тебя зовут и тилипон твой!<br>
    Ножми на миня!</div>
<div class="callmeplease ">
    <div class="closeButton">Закрыть</div>
    <form>   
        <label>sdfsdfsdfd</label><input type="text">

    </form>
</div>

CSS

.callmepleace-show-toggle {  cursor: pointer }
.callmeplease {}
.callmeplease {
            display:none;
            position: fixed;
            left: 50%;
            width: 336px;
            height: 600px;
            margin: -300px 0px 0px -168px;
            top: 50%;
            background: white;
        }

.callmeplease .closeButton {
    float: right;
    cursor: pointer;

}
.callmeplease * {float:left}
.callmeplease form {}
.callmeplease form input {}
.callmeplease form label{}

.callmeplease input {border:1px solid lightblue}

JavaScript

var t = 333;
$('.callmepleace-show-toggle').click(function (e) {
    var $message = $('.callmeplease');
    if ($message.css('display') != 'block') {
        $message.show(t);
        var firstClick = true;
        $(document).bind('click.myEvent', function (e) {
            if (!firstClick && $(e.target).closest('.callmeplease').length == 0) {
                $message.hide(t);
                $(document).unbind('click.myEvent');
            }
            firstClick = false;
        });
    }
    e.preventDefault();
});
$('.closeButton').click(function () {
    $('.callmeplease').hide(t);
});
$('.callmeplease').show(t);