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 Truncate usage 1. Truncat...
This article uses the element official website an...
If you forget your MySQL login password, the solu...
Install lua wget http://luajit.org/download/LuaJI...
Install mysql5.7.21 in the window environment. Th...
Table of contents Linux-Use MyCat to implement My...
Table of contents Add code to the Tree item; 1. S...
1 Introduction PostgreSQL is a free software obje...
Preface Take Element Plus as an example to config...
1. Prerequisites We use the require.context metho...
Table of contents 1. Introduction to jQuery 2. jQ...
Preface Before starting this article, let’s do a ...
Table of contents Preface: 1. Default value relat...
This article shares with you the installation and...
Table of contents What is a skeleton screen How t...