ad

automatic login popup using html, css and java script (source code)

automatic login popup using html, css and java script

automatic popup using javascript


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>automatic-popup</title>
    <style>
        
        #popup {
            border: 2px solid black;
            width: 600px;
            height: 250px;
            position: absolute;
            top: 250px;
            left: 414px;
            background-color: #FF5722;
            display: none;
        }

        #input {
            display: flex;
            flex-direction: column;
            margin-top: 37px;
        }

        .user-pass {
            width: 240px;
            height: 38px;
            margin-left: 169px;
            margin-top: 10px;
            border: 1px solid black;
            border-radius: 5px;
            text-align: center;


        }

        .user-pass:hover{
            background-color: #f3cbbf;
        }

        #user-pass-btn {
            width: 246px;
            height: 38px;
            margin-left: 169px;
            margin-top: 10px;
            border: 1px solid black;
            border-radius: 5px;
            background-color: #f3cbbf;
        }
        #user-pass-btn:hover{
            background-color: #ee8a6b;
            cursor: pointer;
        }

        #cancel {
            position: relative;
            top: -189px;
            left: 566px;
            width: 34px;
            height: 34px;
            border: 1px solid black;
            border-radius: 2px;
            color: white;
            background-color: red;
        }
        #cancel:hover{
            color: black;
        }
    </style>
</head>

<body>
    <!-- first add some content -->
    <div id="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore possimus ducimus vel mollitia minus
        voluptatem eligendi ea, quia doloremque quibusdam quo eaque tenetur debitis facilis illo culpa delectus
        doloribus velit quod, repudiandae, a iure sint at! Aperiam possimus ducimus sunt quaerat ab eaque culpa amet. At
        pariatur molestiae non nobis distinctio deserunt cum deleniti voluptatibus iste, eum omnis hic, libero sequi
        nulla! Ad eveniet incidunt illum, odio perferendis saepe id consequatur omnis illo beatae quasi quis, dolorem
        non soluta quo deserunt ullam nemo unde optio! Maiores tempora nemo ipsam atque! Sapiente ut voluptas in, quidem
        temporibus sed amet. Beatae, quo. Aperiam unde facilis impedit quos architecto quas magni nemo voluptate minima
        quidem? Quasi, ea eligendi architecto a atque, molestiae dolor ipsam molestias vel quisquam quibusdam quo
        corrupti at in, officia nemo dolores eveniet? Illo aut itaque et error nam deleniti beatae dolorum laudantium.
        Illo, animi tenetur harum, nisi explicabo asperiores excepturi, totam architecto ipsum quis labore doloribus
        iste nostrum fugiat officiis similique nemo ullam voluptatibus modi minus aspernatur molestias amet numquam. Est
        quis sint voluptatum maiores quaerat neque, eveniet perferendis expedita placeat facere quasi! Omnis voluptas
        eligendi nemo unde aut dolore, commodi minima ea ut eius amet recusandae velit, laboriosam iusto rerum culpa
        consequatur ratione. Nobis molestiae temporibus laborum ut eveniet, deleniti rem asperiores. Magni eveniet eaque
        eligendi nam consectetur officia iusto cumque voluptatum! Ipsum totam voluptatem temporibus quos rerum dolor
        recusandae error, veritatis laborum explicabo voluptas. Aperiam, voluptates placeat similique corrupti optio
        unde quo hic ipsam dolorem quaerat nisi aliquam rerum explicabo dignissimos quia, deserunt laboriosam laudantium
        assumenda? Incidunt voluptatibus quaerat facere accusamus consequuntur? Nesciunt, ducimus! Labore vel
        consequatur autem deserunt iste hic amet architecto modi reiciendis nulla natus unde optio quidem dicta cum quo
        possimus laboriosam perferendis, odio inventore magnam blanditiis sequi est. Repellat incidunt porro explicabo
        cumque quia ducimus assumenda obcaecati, labore iusto voluptatibus nobis officia. Fuga similique odit porro qui
        omnis consequuntur rem totam tempore. Architecto animi quos sapiente excepturi ex debitis distinctio. Recusandae
        sequi accusamus tenetur quibusdam esse asperiores blanditiis inventore quasi provident voluptatum, repellendus
        doloremque excepturi fugiat culpa quo cum officiis voluptas velit laboriosam pariatur porro dicta! Perspiciatis
        aliquid nisi voluptas delectus atque, vitae labore sapiente molestiae cumque ipsam. Recusandae odio pariatur non
        distinctio, nam delectus, perspiciatis sed quo quas nisi deserunt natus tempora iusto enim dicta reprehenderit
        alias maiores debitis mollitia. Quam, deserunt iste velit asperiores aperiam fugiat tempora facilis id, eaque
        voluptate, veniam quo laborum nam eum quaerat! Iure necessitatibus labore aspernatur quidem, suscipit sequi
        natus, vitae corporis ullam ab reiciendis libero et? Alias, nam. Deserunt blanditiis sunt, eos quae alias
        deleniti dolorum facilis saepe, fugit, laboriosam aliquid rem! Obcaecati, nostrum! Quo, ut omnis repellendus
        modi assumenda, quos ratione magni facilis aliquid quas eaque magnam, ex tempore! Maiores sapiente, voluptatem
        veritatis aut ex culpa voluptates officia nulla in a eveniet. Nam quasi vero vel placeat perferendis facere illo
        ducimus alias eius ipsa dolor temporibus voluptas magnam id quaerat ad, expedita impedit laborum. Molestiae
        aspernatur sit error magnam modi aliquam provident nobis at, voluptatibus nostrum, laborum consequatur
        distinctio, atque recusandae reprehenderit perferendis ad ullam quam et inventore corrupti? Maiores
        reprehenderit excepturi porro quod alias, tenetur illo natus placeat quidem nam laudantium voluptatum, omnis
        officia vitae animi nobis? In sapiente dicta sed neque veniam magnam adipisci repellat assumenda perferendis,
        aliquam excepturi expedita asperiores deserunt fugiat reiciendis amet sunt rerum repudiandae libero ratione ut
        animi dolore eveniet fugit? Tempore quibusdam repellendus recusandae ipsam quasi. Nam placeat animi minus libero
        maxime ab temporibus recusandae porro doloremque, quod commodi corrupti optio iusto consectetur vero architecto
        culpa! At, aliquid architecto, cum ipsam nulla cupiditate error natus repudiandae inventore id ducimus sed quod,
        ab iste eligendi recusandae fuga accusantium? Fugit ex minima perferendis voluptates voluptatem quam libero non
        labore, maiores laboriosam modi cum in ad alias at sit mollitia sint ipsam fugiat soluta doloribus laudantium
        similique ab nesciunt. Tenetur itaque hic possimus error atque nobis numquam ullam necessitatibus recusandae
        minus quia eligendi veritatis eaque temporibus rerum quaerat libero laudantium nam assumenda doloremque,
        asperiores voluptatem! Excepturi, quas nemo facere dolor optio veritatis ipsam ut necessitatibus, tempore animi
        repellendus velit enim suscipit natus molestias fugit expedita earum tempora, modi fuga rem aliquam. Quaerat
        cupiditate ratione nobis autem, ipsa quod placeat accusantium quia ad rerum, nostrum eligendi. Provident
        asperiores dignissimos laborum consectetur quibusdam tempore. Ex illum est dicta quos blanditiis debitis. Eius
        voluptatum id exercitationem neque blanditiis, voluptates vel, libero numquam aut illo incidunt ad pariatur
        natus cupiditate? Minima dicta praesentium quidem incidunt rem! Ipsum, debitis! Inventore aspernatur in, quasi,
        vero tempore hic dolor illo quas perferendis, quia facere architecto sit doloribus soluta optio. Molestiae,
        consectetur! Ullam, cumque? Ex, rerum debitis labore ipsam sapiente deleniti explicabo quis praesentium
        laboriosam tempora sed facere quam itaque illo, quas dolore optio maxime veritatis temporibus odit expedita
        accusantium animi modi. Est voluptatem ratione quam. Ipsa, nihil.</div>

    <div id="popup">
        <div id="input">
            <input type="text" class="user-pass" placeholder="username">
            <input type="text" class="user-pass" placeholder="password">
            <button id="user-pass-btn">login</button>
            <button id="cancel"><strong>X</strong></button>
        </div>
    </div>

    <script>
        let popup = document.getElementById('popup');
        // blur background
        let para = document.getElementById('para');

        function auto(){
            popup.style.display='block';
            para.style.filter='blur(8px)';
        }

        setTimeout(auto,2000)

        // cancel button 

        document.getElementById('cancel').addEventListener('click',function(){
            popup.style.display='none';

            // cancel blur 
            para.style.filter='none';
        })
    </script>

</body>

</html>

Post a Comment

0 Comments