基于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 相关文章推荐
jQuery 页面载入进度条实现代码
Feb 08 Javascript
javascript window对象属性整理
Oct 24 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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 extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php 获取本地IP代码
2013/06/23 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
github配置使用指南
2014/11/18 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
求职面试个人自我评价
2014/02/28 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
离婚上诉状范文
2015/05/23 职场文书
python全面解析接口返回数据
2022/02/12 Python
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers