基于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入门教程(1) 什么是JS
Jan 31 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 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
php5数字型字符串加解密代码
2008/04/24 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python模拟用户登录验证
2017/09/11 Python
Python 异常处理的实例详解
2017/09/11 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
自我评价范文点评
2013/12/04 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
驳回起诉裁定书
2015/05/19 职场文书
公司开业致辞
2015/07/29 职场文书
小学校园广播稿
2015/08/18 职场文书
市级三好生竞选稿
2015/11/21 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python