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

JavaScript
1

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.

window.setTimeout(()=>{
    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>
        <div>
            <a href="tel:000-000-000" class='modal_message'>000-000-000</a>
        </div>
    </div>
    `)
    
    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.head.appendChild(newStyle);
    
    document.querySelector('.modal_closing_button').addEventListener('click', ()=>{
        document.querySelector('.modal_wrapper').remove();
    });
}, 1000);
2

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

3

Just personal comfortability in this case.

4

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…

3 Likes
5

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

Just a quick example

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.