最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

js控制div弹出层实现方法

来源:懂视网 责编:小采 时间:2020-11-27 21:38:14
文档

js控制div弹出层实现方法

js控制div弹出层实现方法:本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下:这是个功能很好,且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~弹出窗口(可拖动,背景灰色透明)*{padding:0; margin:0}.close
推荐度:
导读js控制div弹出层实现方法:本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下:这是个功能很好,且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~弹出窗口(可拖动,背景灰色透明)*{padding:0; margin:0}.close

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

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

弹出窗口(可拖动,背景灰色透明)*{padding:0; margin:0}.close{float:right;cursor:default}")
function $(id){ return document.getElementById(id)}
function AlertMsg(title,content){
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = "分类:确定 取消";
//弹出窗口设置
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 = "关闭"+""+ title +"";
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"); 
//-->
" _ue_custom_node_="true">

【相关教程推荐】

1. JavaScript视频教程
2. JavaScript在线手册
3. bootstrap教程

文档

js控制div弹出层实现方法

js控制div弹出层实现方法:本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下:这是个功能很好,且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~弹出窗口(可拖动,背景灰色透明)*{padding:0; margin:0}.close
推荐度:
标签: 方法 实现 js
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top