基于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 相关文章推荐
javascript 常用关键字列表集合
Dec 04 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
重置Redux的状态数据的方法实现
Nov 18 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
php二维数组排序详解
2013/11/06 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python属于解释语言吗
2020/06/11 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
教师岗位职责
2013/11/17 职场文书
社会实践活动总结报告
2014/04/29 职场文书
小班幼儿评语大全
2014/04/30 职场文书
交通安全横幅标语
2014/10/07 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
学生退学证明
2015/06/23 职场文书
优质服务标语口号
2015/12/26 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
一文搞懂Redis中String数据类型
2022/04/03 Redis
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python