JavaScript实现可拖动模态框

本文实例为大家分享了JavaScript实现可拖动模态框的具体代码,供大家参考,具体内容如下

代码:

HTML代码部分:

<style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
            cursor: pointer;
        }
        .login {
            display: none;
            width: 500px;
            height: 280px;
            position: fixed;
            border: 1px #ebebeb solid;
            left: 50%;
            top: 50%;
            background: #fff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 999;
            transform: translate(-50%,-50%);
        }
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 10px;
            position: relative;
            cursor: move;
        }
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background-color: #fff;
            border: 1px #ebebeb solid;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
        .login-input-content {
            margin-top: 20px;
        }
        .login-button {
            width: 100px;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: 1px #ebebeb solid;
            text-align: center;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        .login-button a {
            display: block;
        }
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: 1px #ebebeb solid;
            text-indent: 5px;
        }
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            height: 35px;
            line-height: 35px;
            text-align: right;
            font-size: 14px;
        }
        .login-mask {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <div class="login-header">点击,弹出登录框</div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员<span><a id="closeBtn" class="close-login" href="javascript:void(0);" >关闭</a></span></div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名:</label>
                <input type="text" placeholder="请输入用户名" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码:</label>
                <input type="password" placeholder="请输入登录密码" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a id="login-button-submit" href="javascript:void(0);" >登录会员</a></div>
    </div>
    <!-- 遮罩层 -->
<div id="mask" class="login-mask"></div>

JS部分:

<script>
        // 1.获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-mask');
        var loginHeader = document.querySelector('.login-header');
        var closeBtn = document.querySelector('.close-login');
        var loginTitle = document.querySelector('.login-title');

        // 2.点击登录提示 让login和mask显示出来;
        loginHeader.addEventListener('click', function() {
            login.style.display = 'block';
            mask.style.display = 'block';
        })
        // 3.点击关闭按钮 隐藏login和mask;
        closeBtn.addEventListener('click', function() {
            login.style.display = 'none';
            mask.style.display = 'none';
        })
        // 4.拖拽登录框
        // 4.1 鼠标按下获得鼠标在盒子中的坐标
        loginTitle.addEventListener('mousedown', function(e) {
            var x = e.pageX-login.offsetLeft;
            var y = e.pageY-login.offsetTop;
            // 4.2 鼠标移动的时候,把鼠标在页面中的坐标 减去 鼠标在盒子中的坐标,得到login盒子的left和top值
            document.addEventListener('mousemove', move)
            function move(event) {
                login.style.left = event.pageX - x + 'px';
                login.style.top = event.pageY - y + 'px';
            }
            // 4.3 鼠标松开的时候,移除移动事件
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move)
            })
        })
</script>

效果演示:

思路:

给可拖动部分添加点击事件,触发时计算鼠标在可拖动部分中的坐标( e.pageX - box.offsetLeft ),得到 x y ,然后给 document 添加鼠标移动事件,因为当鼠标拖动模态框的时候,是在整个DOM窗口内移动的。保持鼠标与模态框的相对位置不变,所以需要计算此时的模态框的位置(e.pageX - x ),进而修改模态框位置。当鼠标弹起时,清除移动事件即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-10-11

原生js实现可拖动的登录框效果

实现原理 1.onmousemove事件触发时不断更新鼠标的pageXY改变位置, 登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离 2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离,再设置true允许拖拽 3.onmouseup 鼠标弹起设置false停止拖拽 4.登录框居中显示公式:(可视区域宽高-登录框宽高)/2 5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示 代码中有详细的注释 完整代码 <!DOCTYPE html PUBL

AngularJs 弹出模态框(model)

推荐阅读:详解AngularJS 模态对话框 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们. $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 res

angularjs创建弹出框实现拖动效果

本文实例介绍了angularjs创建弹出框实现拖动效果的相关代码,项目中需要将angular-ui-bootstrap中用到的弹出框,使之可拖动,分享给大家供大家参考,具体内容如下 运行效果图: 由于源文件中没有实现,需要自己实现指令,以下即为该指令,亲测可以实现. .directive('draggable', ['$document', function($document) { return function(scope, element, attr) { var startX = 0,

JS实现拖动模糊框特效

本文实例为大家分享了JS实现拖动模糊框特效的具体代码,供大家参考,具体内容如下 需求: 在图片上拖动按钮,图片蒙层慢慢覆盖,当蒙层边缘碰到左右下角文字时,文字隐藏. 技术: 监听器,鼠标坐标获取 效果图 源码分享: HTML <h1>Image Comparison Slider</h1> <nav> <!--底层图--> <img src="img/img-original.jpg" alt=""> &l

JS实现图片点击后出现模态框效果

很多时候我们在浏览图片时,会发现点击图片后,会弹出一个被点击图片的放大图片浮在页面上,占满整个窗口.这就是图片模态框效果. 这个效果可以使用某些js库实现,如bpopupJs.但是在这里我们使用纯js实现,能够更好理解效果原理和实现方法. 一.实现思路 我们点击小图片之后,图片模态框出现,同时图片模态框上有一个关闭按钮和图片的标题. 因此,我们的实现思路就是: 图片模态框有大图片,关闭按钮,图片标题三部分. 将图片模态框隐藏,在点击小图片之后,模态框出现. 点击关闭按钮后,模态框隐藏. 二.HT

原生js实现简单的模态框示例

html部分: <img src="images/8.jpg" alt=""> <button class="btn" id="showMax">显示大图</button> <div id="modalBox" class="modalBox"> <div class="modalBox-matter"> &

js实现类bootstrap模态框动画

在pc端开发,模态框是一个很常用的插件,之前一直用的第三方插件,比如bootstrap,jQuery的模态框插件,最近还用了elementUI的.但是会发现其实动画效果都差不多,那么如何去实现这样一个动画效果呢? 模态框的构成  常见的模态框的结构我们很容易就可以看出,一个遮罩层,还有内容区.内容区主要是头部(包括标题,关闭按钮)和body部分(body中常常会有确认和取消按钮). 布局  1.背景要充满全屏,而且如果页面有滚动,当模态框弹出的时候是无法滚动的:  2.内容区要水平居中显示,至于

Vue.js弹出模态框组件开发的示例代码

前言 在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求.这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了.目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能.这个组件还是有很多扩展空间的,可以增加更多的自定义内容和样式.这里只介绍如何去开发一个模态框组件,有需要进行更多扩展的,可以根据自己的需求自行开发

js实现简单模态框实例

模态框在网页中很常见就是在当前页面中弹出一个框供与客户交互. 类似于这样. 首先我们要明白该框工作原理至于怎样与后端进行交互联系这边先不做介绍我们首先是单纯的了解怎样在网页中实现这样的一个框图的显现.值得注意的是框图产生时一般的我们滚动鼠标发现网页仍在移动.实现这样框图就是加了两个盒子 第一个盒子实现背景: 将整个页面覆盖(透明色) 第二个盒子实现交互框. 小编这边来实现一个最简单的交互框(代码量可能相对多了一点,主要是因为样式多了一点整体结构还是非常简单的) 代码如下: 模拟框最关键的一步就是

JS+CSS实现可拖动的弹出提示框

本文实例讲述了JS+CSS实现可拖动的弹出提示框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

JS拖动鼠标画出方框实现鼠标选区的方法

本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法.分享给大家供大家参考.具体如下: 相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作为上传头像时裁切选择图片,在头像裁切中使用广泛,鼠标在图片上拖动拉出一个方框,这个方框就代表着选区的功能,目前网页上已流行的一种操作.主要是依赖于JavaScript代码来实现. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

易语言在画板中画出指定样式的弧线的方法

画弧线方法 英文命令:ArcTo 操作系统支持:Windows    所属对象:画板 使用画笔在画板上画出一条弧线. 语法:  无返回值  画板.画弧线 (椭圆左上角横坐标,椭圆左上角纵坐标,椭圆右下角横坐标,椭圆右下角纵坐标,弧线起始点横坐标,弧线起始点纵坐标,弧线终止点横坐标,弧线终止点纵坐标) 例程 说明 通过"画弧线"命令在画板中画出指定样式的弧线. 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.

基于jquery的用鼠标画出可移动的div

具体的原理我就不多说了,直接贴代码. html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

python画出三角形外接圆和内切圆的方法

刚看了<最强大脑>中英对决,其中难度最大的项目需要选手先脑补泰森多边形,再找出完全相同的两个泰森多边形.在惊呆且感叹自身头脑愚笨的同时,不免手痒想要借助电脑弄个图出来看看,闲来无事吹吹牛也是极好的. 今天先来画画外接圆和内切圆,留个大坑后面来填. 外接圆圆心:三角形垂直平分线的交点. 内切圆圆心:三角形角平分线的交点. 有了思路,就可以用万能的python来计算了 import matplotlib.pyplot as plt from scipy.linalg import solve im

opencv利用鼠标滑动画出多彩的形状

今天没有继续学习新知识点,画出了一个随鼠标画出的 图形,知识点全都是之前学的,话不多说,先上图: 代码部分: // opencvMouse.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include <opencv2/opencv.hpp> using namespace cv; using namespace std; #define WINDOW_NAME "[窗

js实现鼠标感应向下滑动隐藏菜单的方法

本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title> <style>#D1 {     BACKGROUND-COLOR: blue;     BORDER-BOTTOM: white 2px outset;     BORDER-LEFT: white 2px outset;   

JS实现可展开折叠层的鼠标拖曳效果

本文实例讲述了JS实现可展开折叠层的鼠标拖曳效果.分享给大家供大家参考.具体如下: 这是一款简单JS代码实现的鼠标拖曳图层效果,比较精简,大家参考一下.鼠标点击层标题栏可实现层内容的展开与折叠,按住标题栏可实现层的拖动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fade-out-mouse-draw-style-demo/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法

JS实现在线统计一个页面内鼠标点击次数的方法

本文实例讲述了JS实现在线统计一个页面内鼠标点击次数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

js判断鼠标位置是否在某个div中的方法

本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在