js实现div弹出层的方法


Posted in Javascript onNovember 20, 2014

本文实例讲述了js实现div弹出层的方法。分享给大家供大家参考。具体分析如下:

话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看。

这个不用多说了,直接贴代码吧.有码有注释:

/*

 * 弹出DIV层

*/

function showDiv()

{

var Idiv     = document.getElementById("Idiv");

var mou_head = document.getElementById('mou_head');

Idiv.style.display = "block";

//以下部分要将弹出层居中显示

Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px";

Idiv.style.top =(document.documentElement.clientHeight-Idiv.clientHeight)/2+document.documentElement.scrollTop-50+"px";

 

//以下部分使整个页面至灰不可点击

var procbg = document.createElement("div"); //首先创建一个div

procbg.setAttribute("id","mybg"); //定义该div的id

procbg.style.background = "#000000";

procbg.style.width = "100%";

procbg.style.height = "100%";

procbg.style.position = "fixed";

procbg.style.top = "0";

procbg.style.left = "0";

procbg.style.zIndex = "500";

procbg.style.opacity = "0.6";

procbg.style.filter = "Alpha(opacity=70)";

//背景层加入页面

document.body.appendChild(procbg);

document.body.style.overflow = "hidden"; //取消滚动条

 

//以下部分实现弹出层的拖拽效果

var posX;

var posY;

mou_head.onmousedown=function(e)

{

if(!e) e = window.event; //IE

posX = e.clientX - parseInt(Idiv.style.left);

posY = e.clientY - parseInt(Idiv.style.top);

document.onmousemove = mousemove;

}

document.onmouseup = function()

{

document.onmousemove = null;

}

function mousemove(ev)

{

if(ev==null) ev = window.event;//IE

Idiv.style.left = (ev.clientX - posX) + "px";

Idiv.style.top = (ev.clientY - posY) + "px";

}

}

function closeDiv() //关闭弹出层

{

var Idiv=document.getElementById("Idiv");

Idiv.style.display="none";

document.body.style.overflow = "auto"; //恢复页面滚动条

var body = document.getElementsByTagName("body");

var mybg = document.getElementById("mybg");

body[0].removeChild(mybg);

}

<!--弹出层开始-->
<div id="Idiv" style="display:none; position:absolute; z-index:1000; background:#67a3d9;">

    <div id="mou_head" style="width="100px; height=10px;z-index:1001; position:absolute;">这个是用来实现拖层</div>

    <input type="button" value="关闭" onclick="closeDiv();" />

</div>

<!--结束-->

至于一些美化效果,大家可以自己去修修改改了。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 #Javascript
js实现二代身份证号码验证详解
Nov 20 #Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 #Javascript
javascript获取flash版本号的方法
Nov 20 #Javascript
Jquery对象和Dom对象的区别分析
Nov 20 #Javascript
深入理解javascript变量声明
Nov 20 #Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 #Javascript
You might like
PHP安全配置
2006/10/09 PHP
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
pjblog中的UBBCode.js
2007/04/25 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
js实现随机抽奖
2020/03/19 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
python按比例随机切分数据的实现
2019/07/11 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
写得不错的求职信范文
2014/07/11 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
公司处罚决定书
2015/06/24 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
python分分钟绘制精美地图海报
2022/02/15 Python
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js