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

Detailed explanation of MySQL Truncate usage

Table of contents MySQL Truncate usage 1. Truncat...

Element avatar upload practice

This article uses the element official website an...

A brief discussion on the problem of forgotten mysql password and login error

If you forget your MySQL login password, the solu...

How to add Lua module to Nginx

Install lua wget http://luajit.org/download/LuaJI...

MySQL 5.7.21 installation and configuration method graphic tutorial (window)

Install mysql5.7.21 in the window environment. Th...

How to use MyCat to implement MySQL master-slave read-write separation in Linux

Table of contents Linux-Use MyCat to implement My...

Detailed explanation of Jquery datagrid query

Table of contents Add code to the Tree item; 1. S...

Running PostgreSQL in Docker and recommending several connection tools

1 Introduction PostgreSQL is a free software obje...

How to load third-party component libraries on demand in Vue3

Preface Take Element Plus as an example to config...

Example of automatic import method of vue3.0 common components

1. Prerequisites We use the require.context metho...

Detailed explanation of jQuery method attributes

Table of contents 1. Introduction to jQuery 2. jQ...

Graphical explanation of the solutions for front-end processing of small icons

Preface Before starting this article, let’s do a ...

How to set the default value of a MySQL field

Table of contents Preface: 1. Default value relat...

MySQL 8.0.16 Win10 zip version installation and configuration graphic tutorial

This article shares with you the installation and...

Example of implementing the skeleton screen of WeChat applet

Table of contents What is a skeleton screen How t...