当前位置：网站首页>Drag modal box

Drag modal box

2022-06-25 05:03:00 【Dai Sensen】 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> * {
       margin: 0; padding: 0; } .login_bg {
       display: none; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1; } h1 {
       text-align: center; } .login_box {
       display: none; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; width: 400px; height: 200px; background-color: pink; z-index: 2; } </style>
</head>

<body>
    <div id='bg' class="login_bg"></div>
    <h1> Click to pop up the login box </h1>
    <div class="login_box">
        <h3> Member login </h3>
        <div>  user name :<input type="text" value=" Please enter a user name "></div>
        <div>  password :<input type="password" value=" Please enter the login password "></div>
        <button class="link"> Login member </button>
        <button class="close"> close </button>
        <script> var login_box = document.querySelector('.login_box'); var mask = document.querySelector('.login_bg'); var h1 = document.querySelector('h1'); var close = document.querySelector('.close'); var link = document.querySelector('.link'); var h3 = document.querySelector('h3'); h1.addEventListener('click', function() {
       login_box.style.display = 'block'; mask.style.display = 'block'; }); close.addEventListener('click', function() {
       login_box.style.display = 'none'; mask.style.display = 'none'; }); //  Get the mouse coordinates in the box  h3.addEventListener('mousedown', function(e) {
       var x = e.pageX - login_box.offsetLeft; var y = e.pageY - login_box.offsetTop; //  Coordinates from the border to the edge of the document  document.addEventListener('mousemove', fn); function fn(e) {
       login_box.style.left = e.pageX - x + 'px'; login_box.style.top = e.pageY - y + 'px'; } //  Mouse movement event removal  document.addEventListener('mouseup', function() {
       document.removeEventListener('mousemove', fn); }); }); </script>

    </div>
</body>

</html>
原网站

版权声明
本文为[Dai Sensen]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202210528225597.html

边栏推荐

猜你喜欢

随机推荐