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 相关文章推荐
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
无限级别菜单的实现
2006/10/09 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JsRender实用入门教程
2014/10/31 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
python实现博客文章爬虫示例
2014/02/26 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
师范教师毕业鉴定
2014/01/13 职场文书
学校交通安全责任书
2014/08/25 职场文书
法人代表证明书格式
2014/10/01 职场文书
培训讲师开场白
2015/06/01 职场文书
合同补充协议书
2016/03/24 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python