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];
}
}
分享到:
相关推荐
"弹出提示框,背景压暗蒙版"是一种常见的UI设计手法,它用于吸引用户的注意力并提供一个临时的信息展示空间,同时保持对当前操作环境的感知。在这个场景中,"弹出提示框"是指在用户界面中突然出现的、包含特定信息或...
2. **弹出窗口原理**:弹出窗口通常是通过在当前页面上覆盖一个半透明的灰色背景层(也称为蒙版)和一个独立的浮动层来实现的。灰色背景用于降低主页面的视觉焦点,让用户专注于弹出的内容。 3. **CSS样式**:为了...
"js蒙版特效"是利用JavaScript和jQuery库来创建的一种常见网页交互元素,它允许在页面上添加一个半透明的覆盖层,通常用于提示信息、加载动画或遮挡背景,确保用户在特定任务完成之前不会与页面其他部分互动。...
在这个示例中,我们利用JavaScript动态操作DOM元素来创建和控制弹出窗口。 要实现一个居中的弹出窗口,我们可以按照以下步骤进行: 1. **定义窗口大小和位置**: 在`OpenDialog`函数中,我们传入了三个参数:url...
### JS工具方法弹出蒙版知识点详解 #### 一、概述 在Web开发过程中,弹出蒙版(或称为模态对话框)是一种常见的交互设计模式。它可以在不离开当前页面的情况下,为用户提供一个聚焦的操作界面。本次分享的JS工具...
这里包含一个按钮触发弹出窗,一个用于显示蒙版的`<view>`,以及一个包含标题和内容的弹出窗口: ```html 弹出 <view catchtouchmove="preventTouchMove" class="alert-mask" wx:if="{{showModal}}"></view> ...
本篇文章将介绍如何利用Jquery、Div和CSS技术实现一个简单的弹出登录窗口。在Web开发过程中,实现登录功能是常见需求之一,而弹出式登录窗口可以提供更好的用户体验。下面将详细介绍实现该功能的关键步骤和技术要点...
"蒙版模式"是指在弹出层出现时,主页面背景会被一个半透明的遮罩层覆盖,这样可以防止用户在弹出层显示时与主页面的其他内容进行互动。这种设计通常用于需要用户专注于当前弹出层任务的场景,例如填写表单或确认操作...
在C#编程中,"弹出Loading遮罩层"是一个常见的功能需求,特别是在进行异步操作或者长时间数据加载时,为了提升用户体验,我们会显示一个遮罩层,通常带有"加载中"或"请稍候"的提示信息。下面将详细解释如何在C#中...
1. **CSS文件**:用于定义Lightbox的样式,如弹出窗口的外观、蒙版颜色等。 2. **JavaScript文件**:包含了Lightbox的逻辑,处理点击事件、动画效果以及媒体加载。 3. **示例图片**:用于演示如何使用Lightbox的图片...
这种技术可以广泛应用于各种web应用程序中,例如弹出层、对话框、提示框等。 javascript 实现窗口加载蒙板的技术要点 1. 创建蒙板容器:使用javascript创建一个div容器,作为蒙板的容器,并设置其样式和布局。 2....
综上所述,Thickbox3.0是一个强大且易用的JavaScript工具,它简化了Web应用中的弹出窗口实现,提升了用户体验,是Web开发者的得力助手。通过掌握Thickbox,开发者能够更好地创建富有吸引力和交互性的网页内容。
在网页设计中,"div遮蒙锁定效果"是一种常见的交互设计技术,用于提供更好的用户体验,例如在加载新内容、弹出对话框或者显示提示信息时,遮盖住背景页面,让用户注意力集中于特定区域。本篇文章将深入探讨如何使用...
在这个给定的文件中,涉及到的知识点主要包含了...这通常用于在不影响其他页面内容的情况下,突出显示和编辑特定部分的信息,例如在弹出窗口中编辑表单数据。该技术的应用可以极大地增强用户界面的交互性和用户体验。
4. **显示窗口蒙版**:窗口蒙版(Modal)常用于创建弹出式对话框,它可以遮盖住背景页面,让用户专注于当前的操作。在JSP中,可以利用JavaScript库如jQuery的modal插件或者React、Vue等现代前端框架来实现。 5. **...
4. **蒙版与阴影**:为了提供更好的观看环境,Highslide JS可以添加半透明蒙版和阴影效果,使得弹出的图片窗口更加立体且不会干扰背景内容。 5. **自定义控制栏**:开发者可以根据需求自定义控制栏,包括关闭按钮、...
在弹出窗口中,选择合适的格式,如JPEG或PNG,为每个切片设置适当的压缩质量和背景透明度,然后保存。 **步骤4:编写HTML结构** 根据切片,开始编写HTML代码。每个切片代表一个HTML元素,如图片、按钮或导航菜单。...
在本文中,我们将探讨如何利用jQuery操作DOM来实现页面上的遮罩层弹出效果,以及如何针对Web端和移动端防止遮罩层在滚动时发生滑动,从而确保用户体验的一致性和优化。 首先,让我们来看看页面遮罩层的基本概念。...
- AP Div可以用来创建弹出窗口、滚动条等交互式元素,增加网页的互动性。 7. **框架网页**: - 使用HTML框架将多个页面内容集成在同一浏览器窗口中显示。 - 框架技术可以有效组织复杂的信息结构,提高用户体验。...