js控制div弹出层实现方法


Posted in Javascript onMay 11, 2015

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

这是个功能很好,且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出窗口(可拖动,背景灰色透明)</title>
<script type="text/javascript">
<!--
/*FileName:AlertMsg.js
title:提示标题
content:提示的内容*/
document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")
function $(id){ return document.getElementById(id)}
function AlertMsg(title,content){
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = "<form><table style='margin:10px 15px 15px 15px; border:0;'><tr><th style='border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;'>分类:</th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><input type='text' name='typename' size='20'/></td></tr><tr><th></th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><button style='line-height:normal;' type='submit' onclick='return submitform()'>确定</button> <button style='line-height:normal;' type='reset'>取消</button></td></tr></table></form>";
//弹出窗口设置
msgw = 300;  //窗口宽度
msgh = 150;  //窗口高度
msgbg = "#FFF";  //内容背景
msgcolor = "#000";  //内容颜色
bordercolor = "#000"; //边框颜色
titlecolor = "#FFF"; //标题颜色
titlebg = "#369";  //标题背景
//遮罩背景设置
var sWidth,sHeight;
sWidth = screen.availWidth;
sHeight = document.body.scrollHeight;
//创建遮罩背景
var maskObj = document.createElement("div");
maskObj.setAttribute('id','maskdiv');
maskObj.style.position = "absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#777";
maskObj.style.filter = "Alpha(opacity=30);";
maskObj.style.opacity = "0.3";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
document.body.appendChild(maskObj);
//创建弹出窗口
var msgObj = document.createElement("div")
msgObj.setAttribute("id","msgdiv");
msgObj.style.position ="absolute";
msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";
msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.fontSize = "12px";
msgObj.style.background = msgbg;
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.zIndex = "10001";
//创建标题
var thObj = document.createElement("div");
thObj.setAttribute("id","msgth");
thObj.className = "DragAble";
thObj.style.cursor = "move";
thObj.style.padding = "4px 6px";
thObj.style.color = titlecolor;
thObj.style.background = titlebg;
var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";
thObj.innerHTML = titleStr;
//创建内容
var bodyObj = document.createElement("div");
bodyObj.setAttribute("id","msgbody");
bodyObj.style.padding = "10px";
bodyObj.style.lineHeight = "1.5em";
bodyObj.innerHTML = con;
var txt = document.createTextNode(content)
bodyObj.appendChild(txt);
//生成窗口
document.body.appendChild(msgObj);
$("msgdiv").appendChild(thObj);
$("msgdiv").appendChild(bodyObj);
}
function CloseMsg(){
//移除对象
document.body.removeChild($("maskdiv"));
$("msgdiv").removeChild($("msgth"));
$("msgdiv").removeChild($("msgbody"));
document.body.removeChild($("msgdiv"));
}
//拖动窗口
var ie = document.all;  
var nn6 = document.getElementById&&!document.all;  
var isdrag = false;  
var y,x;  
var oDragObj;  
function moveMouse(e) {  
if (isdrag) {  
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";  
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";  
return false;  
}  
}  
function initDrag(e) {  
var oDragHandle = nn6 ? e.target : event.srcElement;  
var topElement = "HTML";  
while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {  
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;  
}  
if (oDragHandle.className=="DragAble") {  
isdrag = true;  
oDragObj = oDragHandle.parentNode;  
nTY = parseInt(oDragObj.style.top);  
y = nn6 ? e.clientY : event.clientY;  
nTX = parseInt(oDragObj.style.left);  
x = nn6 ? e.clientX : event.clientX;  
document.onmousemove = moveMouse;  
return false;  
}  
}  
document.onmousedown = initDrag;  
document.onmouseup = new Function("isdrag=false");  
//-->
</script>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
 <tr >
  <td height="100" align="center" >
<p><a href="javascript:AlertMsg("温馨提示",'')">点我试试!</a></p>
  </td>
 </tr>
</table>
</div>
</body>
</html>

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

Javascript 相关文章推荐
来自国外的页面JavaScript文件优化
Dec 08 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
如何提高Dom访问速度
Jan 05 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
Express框架之connect-flash详解
May 31 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
vue实现节点增删改功能
Sep 26 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
JavaScript实现点击文字切换登录窗口的方法
May 11 #Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 #Javascript
JS选项卡动态替换banner图片路径的方法
May 11 #Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 #Javascript
javascript中this的四种用法
May 11 #Javascript
JQuery插件jcarousellite的参数中文说明
May 11 #Javascript
javascript实现炫酷的拖动分页
May 11 #Javascript
You might like
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
js返回顶部实例分享
2016/12/21 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
通过Pandas读取大文件的实例
2018/06/07 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
详解如何修改python中字典的键和值
2020/09/29 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
幼儿园教师自我鉴定
2014/03/20 职场文书
黄金搭档广告词
2014/03/21 职场文书
IT工程师岗位职责
2014/07/04 职场文书
个人欠条范本
2015/07/03 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
小学三年级作文之写景
2019/11/05 职场文书