popup -02

Revision:


popup form

Login

code:

            <button class="open-button" onclick="openForm()">Open Form<b/button>
            <div class="form-popup" id="myForm">
                <form action="/action_page.php" class="form-container">
                    <h1>Login</h1>
                    <label for="email"><b>Email</b></label>
                    <input type="text" placeholder="enter email" name="email" required>
                    <label for="passsword"><b>Password</b></label>
                    <input type="password" placeholder="enter password" name="password" required>
                    <button type="submit" class="btn">Login</button>
                    <button type="submit" class="btn cancel" onclick="closeForm()">Close</button>
                </form>
            </div>
            <style>
                .open-button {background-color: darkblue; color: white; padding: 1.6vw 2vw; border: .1vw; cursor: pointer;  opacity: 0.8; position: fixed; bottom: 3vw; right: 35vw; width: 22vw;}
                form h1{font-size: 2vw; color: blue; display: flex; justify-content: center; }
                .form-popup {display: none; position: fixed; bottom: 6vw; right: 33vw; border: 0.5vw solid burlywood; z-index: 9;}
                .form-container {width: 25vw; padding: 1vw; background-color: turquoise;}
                .form-container input[type=text], .form-container input[type=password] {width: 100%; padding: .5vw; margin: 0.25vw 0 1vw 0; border: none; background: darkgray;}
                .form-container input[type=text]:focus, .form-container input[type=password]:focus {background-color: lightgray; outline: none;}
                .form-container .btn {background-color: seagreen; color: white; padding: 1.6vw 2vw; border: none; cursor: pointer; width: 70%; margin-bottom:1vw; opacity: 0.6;}
                .form-container .cancel {background-color: tomato;}
                .form-container .btn:hover, .open-button:hover {opacity: 1;}
            </style>
            <script>
                  function openForm() {
                    document.getElementById("myForm").style.display = "block";
                  }
                  
                  function closeForm() {
                    document.getElementById("myForm").style.display = "none";
                  }
            </script>