Please review my "call me at any time" JavaScript-CSS modal

I wrote this simple “call me at any time” modal without any graphical effects.
I show it after 1 second but in practice I should show it after one minute or later.
Please review the code, tell us if you would add something, some graphical effect maybe, or remove something.

    document.body.insertAdjacentHTML('beforeend', `
    <div class='modal_wrapper'>
        <div class='modal_closing_button'>X</div><br>
        <div class='modal_message'>Contact me at any time: </div><br>
            <a href="tel:000-000-000" class='modal_message'>000-000-000</a>
    newStyle = document.createElement("style");
    newStyle.type = "text/css";
    newStyle.innerHTML +=`
        .modal_wrapper {
            display: block;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-sizing: border-box;
            padding: 25px;
            text-align: center;
            z-index: 9999;
            font-weight: bold;
            background: yellow;
        .modal_closing_button {
            display: block;
            text-align: right;
            font-size: 50px;
            color: blue;
        .modal_message {
            display: block;
            text-align: center;
            font-size: 25px;
            color: blue;
    document.querySelector('.modal_closing_button').addEventListener('click', ()=>{
}, 1000);

Is there a reason you need to create the html and css at run time?

Just personal comfortability in this case.

All i’ll say there is hope you never forget you’ve put it in a script file instead of in the actual HTML and CSS…


You could consider trying out the dialog element instead. The following maybe worth a read.

Just a quick example

1 Like