JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

test

JavaScript

function showModal() {
    var modal_form = $('<div id="modal-form"></div>');
    var modal_content = $('<div id="modal-content"></div>');
    var modal_close = $('<div id="modal-close"></div>')
    modal_form.css({
        'background-color': 'rgba(0, 0, 0, 0.5)',
        'display': 'block',
        'height': '100%',
        'left': '0',
        'position': 'fixed',
        'top': '0',
        'width': '100%'
    });
    modal_content.css({
        'background-color': 'rgb(255, 255, 255)',
        'display': 'table-cell',
        'height': '150px',
        'left': '50%',
        'margin-left': '-200px',
        'margin-top': '-75px',
        'padding': '20px',
        'position': 'fixed',
        'top': '50%',
        'vertical-align': 'middle',
        'width': '400px'
    });
    modal_close.css({
        'background': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAAA/klEQVQ4T2NkQAOnT5+OBQolMzIy2qPLwfj////fDZRfYGJisgxZDSOMc+bMGX6gohVARR64DEEXB6rfAVQfATT0I0gObNiqVauYFRUVtwMlXIk1CNmV9+/f9wwLC/sLNgzoqiggtZRUg5DUR4O8DDPsMFDCBiaZnp4OZs6cORPDfBxyR4CG2cIM+wnUxYZuGLqBMIOwWPQLaBg7IyjggZIf0J2ArhGPQTCtAjgNA6lANgCmA5vXoXL4DUM3EI9BIKV0chlZYQZNZ9SJTahhVE1n1MsBVM2bUK+CSo3VpGR2aFEUilJqIKf+U6dOJQANBGG85RlQz2JTU9PFyHoBU++eUWJgzikAAAAASUVORK5CYII=) center no-repeat',
        'cursor': 'pointer',
        'display': 'block',
        'height': '20px',
        'position': 'absolute',
        'top': '5px',
        'right': '5px',
        'width': '20px',
    });
    $('body').append(modal_form);
    modal_form.append(modal_content.html('<p>Специально для вас! Позвоните прямо сейчас по личному номеру руководителя отдела продажа - и получите...</p>'));
    modal_content.prepend(modal_close);
    modal_close.on('click', function(){
        $('#modal-form').remove();
    });
}
setTimeout(showModal, 2000);