javascript实现弹出带透明效果的可拖动图层

最新推荐文章于 2020-12-25 13:23:25 发布

taotaoPHP

最新推荐文章于 2020-12-25 13:23:25 发布

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签： javascript function filter div table xhtml

本文链接：https://blog.csdn.net/taotaoPHP/article/details/5482110

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript实现弹出带透明效果的可拖动图层

最经因为需要一个弹出图层效果，弹出图层倒是容易实现，但具有拖动效果却不知怎么去实现，在网上最终找到了一个需要的效果，代码也不多，一看代码的精炼，知道原作者应该是javascript高手级别的人，现在决定借来一用，我把它略加美化后，看上去效果还很不错。

于是把它记下来，以便今后方便使用。

function openDIV(){

var titleheight = "22px";              // 提示窗口标题高度
var bordercolor = "#000099";     // 提示窗口的边框颜色
var titlecolor = "#ffff00";             // 提示窗口的标题颜色
var titlebgcolor = "#000099";     // 提示窗口的标题背景色
var bgcolor = "#000";                // 提示内容的背景色
var w=600;                                //定义弹出窗口的宽度
var h=400;                                //定义弹出窗口的高度

var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;

//创建背景DIV //cssText属性兼容各个浏览器
var bgObj = document.createElement("div");
bgObj.setAttribute("id","bgDiv");
bgObj.style.cssText = "width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;";
document.body.appendChild(bgObj);

//创建并设置msgObj，且设置透明度效果该背景色为#000，filter:Alpha(Opacity=50);opacity:0.50;
var msgObj=document.createElement("div");
msgObj.setAttribute("id","msgDiv");
msgObj.style.cssText = "position:absolute;font:13px '宋体';top:"+50+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:left;border:4px solid "+bordercolor+";background-color:"+bgcolor+";filter:Alpha(Opacity=50);opacity:0.50;padding:1px;line-height:22px;";
document.body.appendChild(msgObj);

//动态创建一个表格，且第一个单元格作为弹出窗口的标题部分
var table = document.createElement("table");
msgObj.appendChild(table);
table.style.cssText = "margin:0px;border:0px;padding:0px;";
table.cellSpacing = 0;
var tr = table.insertRow(-1);
var titleBar = tr.insertCell(-1);
titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 15px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
titleBar.style.paddingLeft = "10px";
titleBar.innerHTML = "这是标题部分";

//关闭弹出层的按钮设置，在第一行的第二个单元格定义关闭选项
var closeBtn = tr.insertCell(-1);
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";' title='关闭窗口'>×</span>";
closeBtn.onclick = function(){

document.body.removeChild(bgObj); //移除遮罩图层
document.body.removeChild(msgObj); //移除弹出窗口图层
}

//创建内容区部分
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.colSpan = 2;
var str="<div id='msgTxt'>这是内容部分<div>";
msgBox.innerHTML = str;

// 获得事件Event对象，用于兼容IE和FireFox
function getEvent() {

return window.event || arguments.callee.caller.arguments[0];
}

// 按住标题部分进行拖动弹出层拖动的设置操作
//缺少这句文档类型定义，将会出现问题

/*<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">*/
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
titleBar.onmousedown = function() {
  var evt = getEvent();
  moveable = true;
  moveX = evt.clientX;
  moveY = evt.clientY;
  moveTop = parseInt(msgObj.style.top);
  moveLeft = parseInt(msgObj.style.left);

}

css部分：

#bgDiv
{
position:absolute;
top:0px;
left:0px;
background:#000;
filter:alpha(opacity=75); /* IE */
opacity: 0.75; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}

html部分：

<input type="button" value="单击弹出图层" οnclick="openDIV();" />
单击按钮后，就会弹出一个带透明效果，遮罩效果的可拖动图层。

taotaoPHP

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript实现弹出带透明效果的可拖动图层

javascript实现弹出带透明效果的可拖动图层最经因为需要一个弹出图层效果，弹出图层倒是容易实现，但具有拖动效果却不知怎么去实现，在网上最终找到了一个需要的效果，代码也不多，一看代码的精炼，知道原作者应该是javascript高手级别的人，现在决定借来一用，我把它略加美化后，看上去效果还很不错。于是把它记下来，以便今后方便使用。 function open
复制链接

扫一扫