js implements the pop-up login box by clicking the pop-up window

js implements the pop-up login box by clicking the pop-up window

This article shares the specific code of js to realize the pop-up login box when clicking the pop-up window for your reference. The specific content is as follows

1 Image preview

2 index.html code

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js click pop-up window to pop up the login box code</title>
 </head>
 <body>
  <style>
   *{ 
    margin:0;
    padding:0;
   }
         button, input{
    outline:none;
   }
   button, .login{
    width:120px; 
    height:42px; 
    background:#f40; 
    color:#fff; 
    border:none; 
    border-radius:6px;
    display: block;
    margin:20px auto; 
    cursor: pointer;
   }
   .popOutBg{
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    background:rgba(0,0,0,.6);
    display: none;
   }
   .popOut{
    position:fixed;
    width:600px; 
    height:300px;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-300px;
    background:#fff;
    border-radius:8px;
    overflow: hidden;
    display: none;
   }
   .popOut > span{
    position: absolute;
    right:10px;
    top:0; 
    height:42px;
    line-height:42px;
    color:#000;
    font-size:30px;
    cursor: pointer;
   }
   .popOut table{
    display: block;
    margin:42px auto 0;
    width:520px;
   }
   .popOut caption{
    width:520px;
    text-align: center;
    color:#f40;
    font-size:18px;
    line-height:42px;
   }
   .popOut table tr td{
    color:#666;
    padding:6px;
    font-size:14px;
   }
   .popOut table tr td:first-child{
    text-align: right;
   }
   .inp{
    width:280px;
    height:30px;
    line-height:30px;
    border:1px solid #999;
    padding:5px 10px;
    color:#000;
    font-size:14px;
    border-radius:6px;
   }
   .inp:focus{ 
    border-color:#f40;
   }
   @keyframes ani{
    from{
     transform: translateX(-100%) rotate(-60deg) scale(.5);
    }
    50%{
     transform: translateX(0) rotate(0) scale(1);
    }
    90%
     transform: translateX(20px) rotate(0) scale(.8);
    }
    to{
     transform: translateX(0) rotate(0) scale(1);
    }
   }
   .ani{ animation:ani .5s ease-in-out;}
  </style>
  <button type="button">Login</button>
  <div class="popOutBg"></div>
  <div class="popOut">
   <span title="Close"> x </span>
   <table>
    <caption>Welcome to this website</caption>
    <tr>
     <td width="120">Username:</td>
     <td><input type="text" class="inp" placeholder="Please enter your username" /></td>
    </tr>
    <tr>
     <td>Password:</td>
     <td><input type="password" class="inp" placeholder="Please enter your password" /></td>
    </tr>
    <tr>
     <td colspan="2"><input type="button" class="login" value="Login" /></td>
    </tr>
   </table>
  </div>
  <script type="text/javascript">
   function $(param) {
    if (arguments[1] == true) {
     return document.querySelectorAll(param);
    } else {
     return document.querySelector(param);
    }
   }
   function ani() {
    $(".popOut").className = "popOut ani";
   }
   $("button").onclick = function() {
    $(".popOut").style.display = "block";
    ani();
    $(".popOutBg").style.display = "block";
   };
   $(".popOut > span").onclick = function() {
    $(".popOut").style.display = "none";
    $(".popOutBg").style.display = "none";
   };
   $(".popOutBg").onclick = function() {
    $(".popOut").style.display = "none";
    $(".popOutBg").style.display = "none";
   };
  </script>
 </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Detailed explanation of three ways to implement JS pop-up windows in JavaScript
  • js to implement pop-up window guessing number game
  • Native js to realize pop-up message animation
  • Tutorial on how to integrate openlayers with Vue to load geojson and implement a pop-up window
  • js to achieve pop-up effect
  • Implementing a pop-up window to prompt whether to confirm submission based on JS+HTML
  • JavaScript to prevent scrolling after mobile pop-up window
  • Use of several JavaScript pop-up events

<<:  Use dockercompose to build springboot-mysql-nginx application

>>:  Reasons and solutions for MySQL failing to create foreign keys

Recommend

MySQL permission control detailed explanation

Table of contents mysql permission control Permis...

Implementation of mounting NFS shared directory in Docker container

Previously, https://www.jb51.net/article/205922.h...

Beginner's guide to building a website ⑥: Detailed usage of FlashFXP

Today I will introduce the most basic functions of...

Specific use of Linux dirname command

01. Command Overview dirname - strip non-director...

Detailed explanation of overlay network in Docker

Translated from Docker official documentation, or...

Vue.js implements timeline function

This article shares the specific code of Vue.js t...

Tips on making web pages for mobile phones

Considering that many people now use smartphones, ...

Docker data volume common operation code examples

If the developer uses Dockerfile to build the ima...

A brief discussion on MySQL temporary tables and derived tables

About derived tables When the main query contains...

Implementation example of nginx access control

About Nginx, a high-performance, lightweight web ...

Nginx installation error solution

1. Unzip nginx-1.8.1.tar.gz 2. Unzip fastdfs-ngin...

Detailed explanation of the use cases of Vue listeners

The first one is to use jQuery's ajax to send...

How to modify mysql permissions to allow hosts to access

Enable remote access rights for mysql By default,...