Sat Sep 24 2022

Custom Popup Alert

CSS3302 views
File Name: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Popup Alert</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet"> 
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Nunito', sans-serif;
        }

        body { background-color: #292929; }

        section {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        section#bg {
            width: 100%;
            height: 100vh;
        }

        section#bg button[type=button] {
            width: 60px;
            height: 60px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.8);
            cursor: pointer;
        }

        section#bg button[type=button] svg {
            width: 60%;
        }

        section#bg button[type=button] svg path {
            fill: #ff2a05;
        }

        section#popAlert {
            position: fixed;
            top: -100%;
            left: 0;
            right: 0;
            height: 100vh;
            z-index: 20;
            background-color: rgba(255,255,255,0.0);
            transition: 0.6s top cubic-bezier(0.175, 0.885, 0.32, 1.275),
                        0.1s background-color linear 0s;
        }

        section#popAlert.active {
            top: 0;
            background-color: rgba(255,255,255,0.3);

            transition: 0.3s top cubic-bezier(0.175, 0.885, 0.32, 1.275),
                        0.6s background-color linear 0.3s;
        }

        section#popAlert aside {
            width: 90%;
            max-width: 350px;
            text-align: center;
            background-color: #fff;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.6);
        }

        section#popAlert aside h2 {
            font-size: 25px;
            color: #ee2b2b;
        }

        section#popAlert aside p {
            font-size: 16px;
            margin: 5px 0;
        }

        section#popAlert aside button[type=button] {
            width: 100px;
            font-size: 16px;
            font-weight: 600;
            margin-top: 15px;
            border: none;
            border-radius: 3px;
            padding: 5px 0;
            cursor: pointer;
            background-color: #e5e5e5;
            transition: 0.3s all ease-in-out;
        }

        section#popAlert aside button[type=button]:hover {
            background-color: #ee2b2b;
            color: #fff;
        }
    </style>
    <script>
        function togglePop() {
            let popup = document.getElementById('popAlert');
            popup.classList.toggle('active');
        }
    </script>
</head>
<body>
    <section id="bg">
        <button type="button" onclick="togglePop()">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 268.476 268.476" style="enable-background:new 0 0 268.476 268.476;" xml:space="preserve">
                <g id="Delete__x2F__Trash">
                    <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M63.119,250.254c0,0,3.999,18.222,24.583,18.222h93.072
                        c20.583,0,24.582-18.222,24.582-18.222l18.374-178.66H44.746L63.119,250.254z M170.035,98.442c0-4.943,4.006-8.949,8.949-8.949
                        c4.943,0,8.95,4.006,8.95,8.949l-8.95,134.238c0,4.943-4.007,8.949-8.949,8.949c-4.942,0-8.949-4.007-8.949-8.949L170.035,98.442z
                        M125.289,98.442c0-4.943,4.007-8.949,8.949-8.949c4.943,0,8.949,4.006,8.949,8.949v134.238c0,4.943-4.006,8.949-8.949,8.949
                        c-4.943,0-8.949-4.007-8.949-8.949V98.442z M89.492,89.492c4.943,0,8.949,4.006,8.949,8.949l8.95,134.238
                        c0,4.943-4.007,8.949-8.95,8.949c-4.942,0-8.949-4.007-8.949-8.949L80.543,98.442C80.543,93.499,84.55,89.492,89.492,89.492z
                        M218.36,35.811h-39.376V17.899C178.984,4.322,174.593,0,161.086,0L107.39,0C95.001,0,89.492,6.001,89.492,17.899v17.913H50.116
                        c-7.914,0-14.319,6.007-14.319,13.43c0,7.424,6.405,13.431,14.319,13.431H218.36c7.914,0,14.319-6.007,14.319-13.431
                        C232.679,41.819,226.274,35.811,218.36,35.811z M161.086,35.811h-53.695l0.001-17.913h53.695V35.811z"/>
                </g>
            </svg>
        </button>
    </section>

    <section id="popAlert">
        <aside>
            <h2>Are You Sure Want to Delete?</h2>
            <p>This action is final and you will be unable to recover any data?</p>
            <button type="button" onclick="togglePop()">Yes</button>
            <button type="button" onclick="togglePop()">No</button>
        </aside>
    </section>
</body>
</html>
Result Screenshot(s)

Author:Geekboots