JSFiddle - React, Tailwind, and code Playground

by Alexander Lashchevsky

HTML

<div class="newPopup-box js--newPopup" id="window-abc">
    <div class="newPopup-header">
        <div class="newPopup-title">Заголовок</div>
        <img class="newPopup-close js--newPopup-close" src="http://www.44-online.ru/icon-poisk/close.png" /> 
    </div>
    <div class="newPopup-content">
        123
    </div>
</div>

CSS

body {
    background: #000;
}
.newPopup-box {
    display: none;
    position: fixed;
    top: 10%;
    left: 200px;
    right: 200px;
    max-height: 80%;
    background: #fff;
    overflow-y: auto;
}
.newPopup-header {
    position: relative;
    padding: 20px 20px 0;
}
.newPopup-title {
    color: #4D6D91;
    font-weight: bold;
    font-size: 22px;
}
.newPopup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
.newPopup-content {
    padding: 20px;
}

JavaScript

$('.js--newPopup-close').click(function() {
	$(this).closest('.js--newPopup').fadeOut();
});
$('.js--newPopup-open#').click(function() {
	$('.js--newPopup#').fadeIn();
});

$(document).ready(function(){
    if(window.location.href.indexOf('window-abc') > -1){ $('.js--newPopup#window-abc').fadeIn(); }
});