案例点击弹出登录页面并拖拽

最新推荐文章于 2023-05-18 12:00:55 发布

小梦新靓

最新推荐文章于 2023-05-18 12:00:55 发布

阅读量246

点赞数 1

分类专栏： web全栈学习 JavaScript·基础

本文链接：https://blog.csdn.net/qq_43712187/article/details/111473252

版权

web全栈学习同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

JavaScript·基础

14 篇文章 0 订阅

订阅专栏

功能：
（1）、点击弹出对话框有遮盖曾
（2）、关闭登录页面
（3）、页面可用拖拽
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
    /*    导航条*/
        .login-header{
            width: 100%;
            height: 60px;
            /*background: #795da3;*/
            text-align: center;
            line-height: 60px;
            border-top: 2px solid #ccc;
        }
        .login-header a{
            text-decoration: none;
            color: black;
            font-size: 15px;
        }
    /*    图层*/
        .login-bg{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top:0px;
            background: rgba(0,0,0,0.2);
            display: none;
        }
    /*    登录页面*/
        .login{
            position: absolute;

            width: 500px;
            height: 300px;
            background: white;
            left: 50%;
            top: 50%;
            transform: translate(-250px,-150px);
            border-radius: 10px;
            z-index: 20;
            display: none;
            cursor: move;
        }
        .login>span{
            padding-top: 10px;
            display: inline-block;
            width: 100%;
            height: 30px;
            text-align: center;
            font-size: 15px;
            margin-bottom: 10px;
        }
        .login_contant{
            width: 100%;
            height: 150px;
            /*background: #795da3;*/
            text-align: center;
        }
        input{
            width: 300px;
            height: 30px;
            margin: 20px;
            border: 1px solid #ccc;
        }
        button{
            width: 200px;
            height: 40px;
            text-align: center;
            margin-top: 30px;
            background: white;
           position: absolute;
            left:50%;
            transform:translateX(-100px);
            border: 1px solid #ccc;

        }
        .login_close{
            width: 40px;
            height: 40px;
            text-align: center;
            border-radius: 50%;
            border: 1px solid #ccc;
            line-height: 40px;
            position: absolute;
            background: white;
            top:-20px;
            right: -10px;
            z-index:1000;
        }
        .login_close>a{
            display: inline-block;
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<div class="login-header"><a href="javascript:void (0)" id="link" >点击弹出登录框</a></div>
<!--登录页面-->
<div class="login" id="login1">

  <span id="title">登录会员</span>
    <div class="login_contant">
        <div class="login_close" id="close"><a href="javascript:void (0)">关闭</a></div>
        <span>&nbsp;&nbsp;用户名:&nbsp;&nbsp;&nbsp;&nbsp;</span> <input type="text" placeholder="请输入用户名">
        <br>
        <span>登录密码:&nbsp;&nbsp;&nbsp;&nbsp;</span> <input type="password" placeholder="请输入密码">
    </div>
    <button>登录会员</button>
</div>
<!--图层-->
<div id="bg" class="login-bg"></div>
<script src="js/common.js"></script>
<script>
    var show=document.getElementById('link');
    var tuceng=document.getElementById('bg');
    var login=document.getElementById('login1');
    var close=document.getElementById('close');
    link.onclick=function () {
        tuceng.style.display='block';
        login.style.display='block';
    }
    close.onclick=function () {
        tuceng.style.display='none';
        login.style.display='none';
    }
//实现登录界面的拖拽
var title=document.getElementById('title');
    title.onmousedown=function (event) {
      //  处理兼容问题
      var event=event||window.event;
      //首先获取鼠标在按下的位置(鼠标距离边框的位置)
        var x=event.pageX-login.offsetLeft;
        var y=event.pageY-login.offsetTop;
      document.onmousemove=function(e){
          //鼠标移动的时候 x是鼠标的位置（移动以后两次鼠标之间的距离，拿偏移量减去之前的鼠标的位置）
        var loginX=e.pageX-x;
        var loginY=e.pageY-y;
        login.style.left=loginX+'px';
        login.style.top=loginY+'px';
      }

    }
    title.onmouseup=function (e) {
        // 移除事件
       document.onmousemove=null;
    }
</script>
</body>
</html>

显示

在这里插入图片描述

小梦新靓

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
案例点击弹出登录页面并拖拽

功能：（1）、点击弹出对话框有遮盖曾（2）、关闭登录页面（3）、页面可用拖拽代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0px; margin: 0px; .
复制链接

扫一扫

专栏目录