Custom Popup using HTML + CSS + Javascript

 

Video Link - Go to video

Full Code - 

<style>

    .popup-overlay{

        display: none;

        position:fixed;

        top:0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: gainsboro;

        z-index: 999;

        justify-content: center;

        align-items: center;

    }

    .popup-box{

        background: white;

        padding: 20px 30px;

        border-radius: 20px;

        box-shadow: 2px 2px 2px 2px gray;

        max-width: 300px;

    }

</style>

<button onclick="showpopup()">Show Popup</button>

<!--Popup structure-->

<div class="popup-overlay" id="popup">

    <div class="popup-box">

        <h2>Welcome</h2>

        <p>This is custom popup by phpecho</p>

        <button onclick="popclose()">Close</button>

    </div>

</div>

<script>

    function showpopup(){

        document.getElementById("popup").style.display = 'flex';

    }

       function popclose(){

        document.getElementById("popup").style.display = 'none';

    }

</script>