基于JavaScript实现弹出框效果


Posted in Javascript onFebruary 19, 2016

弹出框在网站页面中是必不可少的一部分,今天借助三水点靠木平台给大家分享使用js实现简单的弹出框效果,本文写不好,还请见谅!

基于JavaScript实现弹出框效果 

首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等,尾部就是按钮(确认,取消等等),这个例子尾部我就不加入按钮了,这个例子主要是实现弹出框的核心部分.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, div{
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
}
.pop {
border-radius: 5px;
background-color: #fff;
border: #eee 1px solid;
position: absolute;
width: 350px;
left: 35%;
top: 25%;
}
.pop-title {
background-image: linear-gradient(#eee,#efefef);
position: relative;
cursor: pointer;
}
.pop-title h3,.pop-title a{
display: inline-block;
}
.pop-title h3{
font-size: 14px;
margin: 0;
padding: 5px;
}
.pop-title a {
position: absolute;
top: 5px;
right: 5px;
}
.pop-content {
padding: 10px;
}
</style>
</head>
<body>
<div>
<div>
<h3>消息</h3>
<a href="javascript:;">X</a>
</div>
<div>
弹出框已显示
</div>
<div></div>
</div>
</body>
</html>

弹出框,在头部按下的时候,开启移动模式,在头部松开的时候就禁止移动.其实就这么一句的意思. 当然逻辑也是比较简单的.

这里我们就可能想到了几个变量,移动的X,Y坐标,移动的开关和禁止. 然后就是给title加入onmousedown 和 onmouseup事件.

onmousedown事件中主要是开启移动.

onmouseup 事件中逻辑主要是关闭移动,禁止移动弹出框.

接着需要移动,而移动需要时在某个范围内移动.这里我们是在body里面移动. 所以给body加入onmousemove事件. 这里面做的事情就是移动弹出框的位置处理.

在这三个事件中主要是配合了CSS中的position属性和JS中的Event事件中的属性的坐标.

var pop = document.getElementsByClassName("pop")[0];
var pop_title = pop.getElementsByClassName("pop-title")[0];
var bd = document.body;
var x = 0;
var y = 0;
var ismove = false; // 是否开启移动
var downx = 30;
var downy = 30;
pop_title.onmousedown = function (e) {
x = e.pageX;
y = e.pageY;
downx = e.offsetX;
downy = e.offsetY;
ismove = true;
}
bd.onmousemove = function (e) {
if (ismove) {
var cx = e.pageX - downx;
var cy = e.pageY - downy;
pop.style.left = cx + "px";
pop.style.top = cy + "px";
x = e.x;
y = e.y;
}
e.preventDefault();
}
pop_title.onmouseup = function (e) {
x = e.pageX;
y = e.pageY;
ismove = false;
console.log("移动完成")
}

移动弹出框完成后,我们给关闭按钮加入关闭事件.

//关闭 
var pop_close = pop.getElementsByClassName("pop-close")[0];
pop_close.onclick = function () {
pop.parentNode.removeChild(pop);
}

好了,简单的弹出框就实现了.同样代码自己可以优化封装,加入其它的功能.兼容性问题可能需要自己去处理一下(IE9以前的版本).

基于JavaScript实现弹出框效果 

js实现弹出框效果就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
jquery 选取方法都有哪些
May 18 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
jquery实现手风琴效果
Nov 20 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 #Javascript
学习javascript文件加载优化
Feb 19 #Javascript
初识angular框架后的所思所想
Feb 19 #Javascript
复杂的javascript窗口分帧解析
Feb 19 #Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 #Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 #Javascript
谈一谈javascript中继承的多种方式
Feb 19 #Javascript
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
js arguments对象应用介绍
2012/11/28 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
react实现菜单权限控制的方法
2017/12/11 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python subprocess库的使用详解
2018/10/26 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Python collections模块的使用方法
2020/10/09 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
先进集体获奖感言
2014/02/13 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS