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 preview2 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:
|
<<: Use dockercompose to build springboot-mysql-nginx application
>>: Reasons and solutions for MySQL failing to create foreign keys
Table of contents mysql permission control Permis...
Previously, https://www.jb51.net/article/205922.h...
Today I will introduce the most basic functions of...
01. Command Overview dirname - strip non-director...
Translated from Docker official documentation, or...
This article shares the specific code of Vue.js t...
Considering that many people now use smartphones, ...
If the developer uses Dockerfile to build the ima...
About derived tables When the main query contains...
About Nginx, a high-performance, lightweight web ...
1. Unzip nginx-1.8.1.tar.gz 2. Unzip fastdfs-ngin...
Usage scenario: We use Alibaba Cloud and purchase...
The first one is to use jQuery's ajax to send...
Enable remote access rights for mysql By default,...
8 optimization methods for MySQL database design,...