js移动登录对话框添加背景层（ie也支持样式不好看）

最新推荐文章于 2022-07-22 16:34:04 发布
最新推荐文章于 2022-07-22 16:34:04 发布
阅读量172 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014805482/article/details/83474761
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css"/>
    <style>
        #clickPop{
            width: 100%;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
        #login{
            width: 520px;
            height: auto;
            padding: 0 10px;
            margin: 100px 700px;
            box-shadow: 0 0 20px;
            border-radius: 5px;
            text-align: center;
            position: absolute;
            display: none;
            z-index: 999;
            background-color: #ffffff;
            border: 1px solid #eeeeee;
        }
        .top{
            text-align: center;
            width: 100%;
            height: 70px;
            line-height: 70px;
            cursor: move;
            position: relative;
        }
        .center input{
            width: 300px;
            height: 30px;
            margin-top: 20px;
            border-radius: 5px;
            padding-left: 5px;

        }
        #login .button{
            width: 100px;
            background-color: #ffffff;
            margin-bottom: 10px;
        }
        #close{
            width: 40px;
            height: 40px;
            position: absolute;
            right: -15px;
            top: -15px;
            border-radius: 50%;
            background-color: red;
            text-align: center;
            line-height: 40px;
            display: inline-block;
        }
        #close a{
             color: #000000;
            font-size: 18px;
         }
        .bg{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            display: none;
        }
    </style>
</head>
<body>
    <div id="clickPop">点击弹出</div>
    <!--登录框-->
    <div id="login">
        <div class="top" id="top">
            <h1>登录对话框</h1>
            <span id="close"><a href="javascript:void(0);">X</a></span>
        </div>
        <div class="center">
            <label>用户名</label>
            <input type="text" placeholder="请输入用户名"/><br/>
            <label>密码</label>
            <input type="text" placeholder="请输入密码" style="margin-left: 12px"/><br/>
            <input type="button" value="登录" class="button"/>
        </div>
        <!--关闭按钮-->

    </div>
    <!--背景层-->
    <div class="bg" id="bg"></div>
<script>
    function queryId(id) {
        return document.getElementById(id);
    }
    //给外层添加一个弹出事件
    queryId("clickPop").onclick = function (ev) {
        //显示出登录对话框
        queryId("login").style.display = "block";
        //弹出背景层
        queryId("bg").style.display = "block";
        //因为弹出按钮属于document,所以会发生事件冒泡,所以要阻止事件冒泡,
        window.event?window.event.cancelBubble = true:ev.stopPropagation();
    };
    //给close添加点击事件，点击隐藏登录和背景层
    queryId("close").onclick = function () {
        //显示出登录对话框
        queryId("login").style.display = "none";
        //弹出背景层
        queryId("bg").style.display = "none";
    };
    //如果弹出登录对话框的时候点击除了登录框以外的的地方也关闭背景和登录对话框用document
    //因为登录对话框属于document,所以会发生事件冒泡,所以要阻止事件冒泡,
    //事件处理对象ev chrome和火狐支持，window.event ie支持
    //document.documentElement html
    //document.documentElement document
    queryId("login").onclick = function (ev) {
        window.event?window.event.cancelBubble = true:ev.stopPropagation();

    };
    document.documentElement.onclick = function () {
        queryId("login").style.display = "none";
        //弹出背景层
        queryId("bg").style.display = "none";
    };

    //鼠标按下事件移动整个登录对话框
    queryId("top").onmousedown = function (ev) {
        //求出此时鼠标点击区域距离登录对话框边框直接的距离
        var clickX = window.event.clientX?window.event.clientX-queryId("login").offsetLeft:ev.clientX-queryId("login").offsetLeft;
        // var clickX = ev.clientX||window.event.clientX-queryId("login").offsetLeft;
        var clickY = window.event.clientY?window.event.clientY-queryId("login").offsetTop:ev.clientY-queryId("login").offsetTop;
        // var clickY = ev.clientY||window.event.clientY-queryId("login").offsetTop;
        //给document注册移动事件
        document.onmousemove = function (ev2) {
            //求出此时登录对话框距离浏览器左边和上边的的距离
            //减100 700是因为margin的关系，让距离始终在拖动区域左上方
            // queryId("login").style.left = ev2.clientX||window.event.clientX-clickX-700+"px";
            // queryId("login").style.top = ev2.clientY||window.event.clientY-clickY-100+"px";
            queryId("login").style.left = window.event.clientX?window.event.clientX-clickX-700+"px":ev2.clientX-clickX-700+"px";
            queryId("login").style.top = window.event.clientY?window.event.clientY-clickY-100+"px":ev2.clickY-clickY-100+"px";
        };
    };
    //给document注册鼠标抬起事件,清除移动事件
    document.onmouseup = function () {
        document.onmousemove = null;
    }
</script>
</body>
</html>

实现效果
在这里插入图片描述

范2小青年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超好看js特效背景切换登录界面
07-24
超好看js特效背景切换登录界面，背景自己变色，js特效
真正的模式对话框-js
wumiju的专栏
02-24 3662
真正的模式对话框          /*用来显示模式对话框的方法*/    function show()    {    /*var mValue接收对话框回传的值*/     var mValue=showModalDialog("m.html","向对话框传参","dialogWidth:200px;dialogHeight:200px;status:0;help:0");
漂亮的javascript对话框(弹出层)组件
gameWYD的专栏
09-20 2584
javascript对话框(弹出层)组件artDialog 　　artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。 　　演示地址：http://www.planeart.cn/downs/artDialog/ 　　项
Vue.js——登录界面实现插入背景
FranzLiszt的博客
10-08 7985
登录界面实现插入背景效果图插入背景图片样式引用登录实现引入Element UI通过npm安装通过引入样式库实现双向绑定账号密码设置点击事件尾言 效果图 插入背景图片 样式 制作样式 因为我顶部设置了导航栏，所有高度只设置了85% .background_style{ width:100%; height:85%; position:fixed; background-size:100% 100%; background-repeat: no-repeat; background-image: url(".
HTML5+CSS3+JS制作动态背景登录界面
m0_71749982的博客
07-22 6482
如何制作出动态背景登录效果
原生js Dialog对话框插件制作19种对话框弹出层拖动
11-10
本主题将深入探讨如何使用原生JavaScript实现一个具备19种不同类型的对话框插件，同时支持对话框的拖动功能。我们将讨论以下几个关键知识点： 1. **DOM操作**： 在创建和管理对话框时，DOM操作是必不可少的。...
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
10-24
在JavaScript编程中，实现点击按钮弹出一个可关闭层窗口并使网页背景变灰的效果，是一种常见的用户交互设计，常用于提示信息、确认操作或显示模态对话框。以下是实现这一功能的关键知识点： 1. **JavaScript事件...
JavaScript实现弹出层的移动 兼容IE和Firefox
07-26
JavaScript是Web开发中不可或缺的一部分，尤其在实现交互性功能时，如弹出层的移动。在标题"JavaScript实现弹出层的移动 兼容IE和Firefox"中，我们可以看到主要涉及的是JavaScript动态改变HTML元素位置的技术，并且...
jQuery Dialog 弹出层对话框插件
10-28
在IE6中，由于不支持fixed定位，可以通过监听`onscroll`事件来模拟实现对话框随滚动条同步移动的效果。 ```javascript var left = ($(window).width() - dialog.width()) / 2; var top = ($(window).height() - ...
JavaScript写的一个DIV 弹出网页对话框
10-29
在这个实例中，我们看到一个基于DIV的自定义对话框，它具有良好的浏览器兼容性，支持从IE6到IE8及火狐浏览器。 首先，这个弹出对话框的核心在于通过JavaScript动态创建HTML元素来实现。`MessageBox`是一个自定义...
js实现登录页面的背景图片的随机展示
皮卡战记
06-18 4406
js代码如下： &lt;script type="text/javascript"&gt; // 随机展示背景图片 var imgSrcs = [ "${ctx}/static/images/background/1.jpg", "${ctx}/static/images/background/2.jpg", ...
HTML5Canvas 酷炫效果
yy211zhu的博客
03-02 2162
以下是利用JavaScript调用HTML5Canvas画布所做的效果<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <style>body{text-align: center;background:ddd;overflow: hidden;background: #blu
app登录界面背景 css_react移动端聊天react+redux仿微信App界面聊天实例
weixin_39968801的博客
11-26 174
react+redux+react-dom+react-router-dom+swiper等技术开发仿微信手机端app界面聊天室|react聊天实例。实现了聊天消息下拉刷新、发送消息/表情、图片/视频预览、打赏/红包等功能。技术栈mvvm框架：react / react-dom状态管理：redux / react-redux页面路由：react-router-dom弹窗插件：wcPop打...
js设置页面背景色,设置背景图片
技术交流
11-05 2220
New Document function update(temp) { if(temp == 'color') { document.body.style.backgroundColor="#FFFFFF";//改变...
html+javascript实现三种对话框和模式对话框
热门推荐
张亚运的专栏
11-27 1万+
.html代码如下： 对话框 alert("Hello"); if(confirm("test")) document.write(""); prompt("aaaa","1");//aaa为提示信息，1为默认输出 var name; do{ name = prompt("输入用户名");//带输入窗的对话框 var correct = confirm("输入用户名为：
js 实现各种格式对话框
dy_Smile的专栏
08-12 2240
如何用javascript脚本实现打开像window中的“选择文件”、“另存为”等文件对话框作者:陈格 日期:2007-12-29字体大小: 小 中 大  问： document.execCommand("open")好象不是直接打开选择文件的对话框。 _________
html+css+js实现火影背景切换登录页面
技术成长ing
10-02 4479
1.效果图（代码往下滑） 2.html代码 3.css代码 *{ margin:0px; padding:0px; } /* *号是全部的都外边距和内边距都为0，而body只是主题的外边距和内边距都为0 需要给 html 和 body 同时设宽高 100% 图片才能覆盖浏览器页面*/ html,body{ overflow:hidden; width...
js生成车架号
u014805482的博客
10-24 5407
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;车架号&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值