function alertWin(title, msg, w, h){
var titleheight = "22px";//提示窗口标题高度
var bordercolor = "#0051AA";//提示窗口的边框颜色
var titlecolor = "#FFFFFF";//提示窗口的标题颜色
var titlebgcolor = "#0051AA";//提示窗口的标题背景色
var bgcolor = "#FFFFFF";//提示内容的背景色
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
var bgObj = document.createElement("div");
bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div");
msgObj.style.cssText = "position:absolute;font:14px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
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 13px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
titleBar.style.paddingLeft = "10px";
titleBar.innerHTML = title;
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);
document.onmousemove = function() {
if (moveable) {
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) {
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
};
document.onmouseup = function () {
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
var closeBtn = tr.insertCell(-1);
//得到是从哪来的,关闭窗口后跳回。
var path =document.getElementById("pathMsg").value;
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
closeBtn.innerHTML = "<span style='font-size:15px; color:"+titlecolor+";'>×</span>";
closeBtn.onclick = function(){
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
//关闭窗口后跳回。
window.location.href =path;
}
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.cssText = "font:14px '宋体';";
msgBox.colSpan = 2;
msgBox.innerHTML = "<table>"
+ "<tr>"
+ "<td><img src='/imgs/cl_2.gif'></td>"
+ "<td style='text-align:left;'>"+msg+"</td>"
+ "</tr>"
+ "</table>";
//获得事件Event对象,用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
}
分享到:
相关推荐
现在,我们需要用JavaScript来控制蒙板和弹出层的显示和隐藏。这里有一个简单的示例,使用了JavaScript的DOM操作和事件监听: ```html ()">显示弹出层 function showPopup() { var mask = document....
1. `showDialog()`: 显示对话框,同时在背景上添加一个半透明的蒙版,使得用户无法与页面其他部分交互,专注于当前的弹出层。 2. `hideDialog()`: 隐藏对话框,同时移除蒙版,恢复页面的正常交互。 3. `createMask()...
这种技术可以广泛应用于各种web应用程序中,例如弹出层、对话框、提示框等。 javascript 实现窗口加载蒙板的技术要点 1. 创建蒙板容器:使用javascript创建一个div容器,作为蒙板的容器,并设置其样式和布局。 2....
在这个例子中,我们将深入探讨如何使用JavaScript和CSS在页面上弹出一个简单的蒙板。 首先,蒙板主要由两个`div`元素组成:`popWindow`和`maskLayer`。`popWindow`用于覆盖整个页面,呈现半透明效果,起到遮挡页面...
3. 在JS中处理数据和事件,通过改变`showModal`状态控制弹出窗的显示与隐藏。 通过这种方式,我们可以灵活地在微信小程序中创建具有蒙版效果的弹出窗,并根据实际需求调整样式和内容。同时,这样的设计也方便与其他...
Jnet功能强大的JS类,浮动,模态,遮罩弹出等效果,这些弹出框很漂亮,分有蒙板和无蒙板,功能有Alert弹出提示、Confirm确认提示、iFrame框架、iFrame内嵌自定义弹出框等。从形式上来说,每个弹出框在使用时可设置弹出...
一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的php来做的,插件的使用和安装极其繁琐,于是上网查了些demo,自己实现了一个纯js的图片弹出插件。 实现的思路是通过编写hook图片的onclick事件的函数...
()">弹出蒙板 ()"> <!-- 内容 --> ``` 在这个例子中,蒙板会在用户点击“弹出蒙板”按钮时显示,当用户点击蒙板本身或其中的关闭按钮时消失。 总结来说,实现JavaScript蒙板功能的关键在于正确设置CSS样式以实现...
这种方式适用于全屏蒙板或弹出框等场景。 4. **局部蒙板的应用** 对于局部蒙板,例如日期选择器或弹出提示等,通常采用`iframe`和`div`相结合的方式。这样既可以避免`<select>`等元素的问题,又能够精确控制遮挡...
HTML5蒙层效果是一种网页设计技术,用于在页面上创建半透明覆盖层,通常用于显示弹出窗口、对话框或加载指示器等交互元素。这种效果可以增强用户体验,因为它们可以暂时屏蔽背景内容,使用户专注于当前的任务或信息...
内容索引:脚本资源,Ajax/JavaScript,浮动框,提示框 Jnet 网页浮动框控件,内附测试示例,这些弹出框很漂亮,分有蒙板和无蒙板,功能有Alert弹出提示、Confirm确认提示、iFrame框架、iFrame内嵌自定义弹出框等。...