javascript实现移动的模态框效果
本文实例为大家分享了javascript实现移动的模态框效果的具体代码，供大家参考，具体内容如下
页面效果：
点击链接后，弹出登录模态框，点击关闭链接可以关闭模态框，鼠标在模态框标题区域按下后可以拖拽模态框，松开鼠标后，模态框停止移动
实现思路：
1、html、css搭建好页面，设置好模态框内容和样式后，将模态框隐藏：display: none;如果点击弹出模态框后，页面背景色发生改变，可以添加一个遮罩层，将遮罩层也先隐藏
2、给点击后弹出模态框的元素添加点击事件- - -onclick
事件处理程序中设置- - -模态框 和 遮罩层 显示- - -eg:
login.style.display = ‘block'; loginBg.style.display = ‘block';
3、给关闭模态框元素添加点击事件- - -onclick
事件处理程序中设置- - -模态框 和 遮罩层 隐藏- - -eg:
login.style.display = ‘none'; loginBg.style.display = ‘none';
4、给模态框标题部分添加鼠标按下事件- - -mousedown
获取鼠标在模态框中的位置
5、鼠标按下事件中再添加鼠标移动事件- - -mousemove
document.addEventListener(‘mousemove', move);
获取鼠标在页面中的位置
鼠标的位置值 - 鼠标在模态框中的位置值 = 模态框在页面中的位置值
将计算得出的位置值赋值给模态框的top、left，就可以达到拖拽鼠标的效果，跟随鼠标移动
6、当鼠标松开后，模态框要停止移动。鼠标按下事件中再添加鼠标松开事件- - -mouseup
鼠标松开事件处理程序：页面移除鼠标移动事件- - -document.removeEventListener(‘mousemove', move);
注意：要添加移除事件，所以给鼠标移动函数单独拿出来，写一个函数名，添加和移除事件时引用函数名就可以了
代码示例：
<!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>拖动的模态框</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
.login-header {
margin: 100px auto;
height: 30px;
line-height: 30px;
font-size: 24px;
text-align: center;
}
.login {
display: none;
width: 515px;
height: 282px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ebebeb;
background-color: #fff;
box-shadow: 0px 0px 20px #ddd;
text-align: center;
z-index: 99999;
}
.login-title {
position: relative;
height: 50px;
line-height: 50px;
font-size: 18px;
cursor: move;
}
.close {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
width: 36px;
height: 36px;
line-height: 36px;
font-size: 12px;
border-radius: 18px;
border: 1px solid #ddd;
color: #666;
background-color: #fff;
}
.login-input-content {
margin: 10px 0;
}
.login-input label {
display: inline-block;
width: 80px;
text-align: right;
}
.login-input input {
width: 300px;
height: 40px;
margin: 10px 0;
padding-left: 10px;
border: 1px solid #ddd;
outline-color: royalblue;
}
.loginBtn a {
display: block;
width: 180px;
height: 35px;
line-height: 35px;
margin: 10px auto;
border: 1px solid #ddd;
}
.login-bg {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:;" >点击，弹出登录框</a></div>
<div class="login">
<div class="login-title">
登录会员
<span><a class="close" href="javascript:void(0);" >关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label for="username">用户名：</label>
<input type="text" name="info[username]" id="username" placeholder="请输入用户名"><br>
</div>
<div class="login-input">
<label for="password">登录密码：</label>
<input type="password" name="info[password]" id="password" placeholder="请输入登录密码"><br>
</div>
</div>
<div type="submit" value="登录会员" class="loginBtn"><a href="javascript:void(0);" >登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div class="login-bg"></div>
<script>
var link = document.querySelector('#link');
var login = document.querySelector('.login');
var loginBg = document.querySelector('.login-bg');
var close = document.querySelector('.close');
var loginTitle = document.querySelector('.login-title');
link.addEventListener('click', function() {
login.style.display = 'block';
loginBg.style.display = 'block';
})
close.addEventListener('click', function() {
login.style.display = 'none';
loginBg.style.display = 'none';
})
loginTitle.addEventListener('mousedown', function(e) {
// 计算出鼠标按下时，鼠标在模态框中的位置
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// 给移动的模态框赋值位置
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// 添加鼠标事件，按下鼠标时模态框跟着鼠标移动
document.addEventListener('mousemove', move);
// 鼠标松开时，模态框停止移动
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>
</body>
</html>
页面效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
效果图: 如图,这是使用Validator插件,所完成的功能,效果很强大,也很方便,这边推荐使用这种方式,最后介绍一下原始js验证写法. 首先,导入插件: <link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen"
-
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"> &
-
AngularJS模态框模板ngDialog的使用详解
项目开始的时候我们用的对话框是AngularJS的$modal模态框,但是后来发现$modal打开的对话框是相对页面静止的,如果对话框是一个很长的表单,这样体验度就不是很好了,还有$modal传$scope不是很灵活的原因,后来就改用的$ngDialog. 官方的API在这里:https://www.npmjs.com/package/ng-dialog 首先确定你的项目已经安装了$ngDialog需要的相关文件. 接下来一个简单的demo del.html内容如下,就是你的对话框内容,这里比较
-
Vue.js弹出模态框组件开发的示例代码
前言 在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求.这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了.目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能.这个组件还是有很多扩展空间的,可以增加更多的自定义内容和样式.这里只介绍如何去开发一个模态框组件,有需要进行更多扩展的,可以根据自己的需求自行开发
-
js利用事件的阻止冒泡实现点击空白模态框的隐藏
很多时候,我们做前端的时候都会有这样的小功能,点击弹出某个框框,但是,有时候不想操作,就想点击某个空白处,隐藏该框框.假设如下场景,一个小按钮,点击可以弹出一个模态框. 就这么简单,但是我们想要点击空白部分的时候隐藏模态框,加入按钮id:btn,模态框id:model 也许我们最简单的思路就是直接在document上监听一个事件,伪代码如下: 按钮点击弹出事件监听: 复制代码 代码如下: $("#btn").bind("click",function(e){ if(
-
AngularJS中使用ngModal模态框实例
在AngularJS中使用模态框需要引用的文件: angular.js 1.5.5 ui.bootstrap-tpls.js 0.11.2 bootstrap.css 3.3.7 需要注意版本要一致,高版本的不支持这种方法,会出错 将需要弹出的模态框的内容写在 script 标签中,指明属性,放在页面中 <script type="text/ng-template" id="modal.html"> <div> <div class=&
-
AngularJs 弹出模态框（model）
推荐阅读:详解AngularJS 模态对话框 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们. $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 res
-
js实现简单模态框实例
模态框在网页中很常见就是在当前页面中弹出一个框供与客户交互. 类似于这样. 首先我们要明白该框工作原理至于怎样与后端进行交互联系这边先不做介绍我们首先是单纯的了解怎样在网页中实现这样的一个框图的显现.值得注意的是框图产生时一般的我们滚动鼠标发现网页仍在移动.实现这样框图就是加了两个盒子 第一个盒子实现背景: 将整个页面覆盖(透明色) 第二个盒子实现交互框. 小编这边来实现一个最简单的交互框(代码量可能相对多了一点,主要是因为样式多了一点整体结构还是非常简单的) 代码如下: 模拟框最关键的一步就是
-
angularJS模态框$modal实例代码
1.引入$modal模块 如:angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]); 2.执行调模态框 函数 $scope.editModule = function(type, size, id) { $scope.id = id; var modalInstance = $modal.open({ templateUrl: 'tpl/weichat_modulebaseinfo.html