<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出一个层，页面变灰</title>
<script language="javascript">
function alertWin(title, w, h){
var titleheight = "20px"; // 窗口标题高度
var bordercolor = "#336699"; // 提示窗口的边框颜色
var titlecolor = "#FFFFFF"; // 窗口标题颜色
var titlebgcolor = "#336699"; // 窗口标题背景色
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:11px '宋体';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);
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
closeBtn.onclick = function(){
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
}
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.cssText = "font:10pt '宋体';";
msgBox.colSpan = 2;
msgBox.innerHTML = '<br/> 请求正在处理中...<br/><img src=../../loading.gif />';
// 获得Event对象，用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
}
</script>
</head>
<body>
<input type="button" value="点这里" onclick="alertWin('请求处理提示:',290,130);" />
</body>
</html>
分享到：
相关推荐
在提供的压缩包中，你可以找到`轻量级JavaScript弹出层示例【优秀源码】`，这个文件应该包含了相关的示例代码和文档，通过查看和运行这些示例，可以更直观地了解和学习easyDialog的使用方法和技巧。如果你遇到任何...
这种弹出层效果极大地增强了用户界面的互动性和信息展示的灵活性。 弹出层在 web 开发中的应用非常广泛，包括但不限于：提示信息、表单提交确认、图片画廊、模态窗口、广告展示等。它们可以避免页面跳转，保持用户...
- **模态对话框**：利用CSS和JavaScript，可以创建一个覆盖在当前页面上的半透明遮罩层，以及一个显示子内容的弹出框。这种方式不会离开主页面，用户可以随时关闭对话框返回。 3. **在Struts1中的实现：** - **...
在网页设计中，弹出层是一种常见的交互元素，用于显示警告、提示、表单或更多详细信息，而无需跳转页面。在给定的标题和描述中提到的"弹出DIV层窗口"是指使用HTML、CSS和JavaScript实现的浮动窗口效果。这种技术常...
在网页设计和开发中，弹出层是一种常见的交互元素，用于显示额外的信息、表单、图片或其他内容，而不会离开当前页面。这个“学习弹出层的简单例子”旨在帮助初学者理解如何在JSP（JavaServer Pages）中实现弹出层...
这部分代码确保了弹出层的样式和行为正确无误。 #### 三、弹出层的创建与控制 弹出层可以通过`<sm:windowbox>`标签来创建。例如： ```html 标题" var="testdivbox" height="300px"/> ``` 其中： - `id`：必需，...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码，含注释 两个目标文件，自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟，效果图如下所示，...
这里点击按钮后，弹出一个可关闭的层窗口，随之网页背景变灰，在QQ网站上经常会看到QQ登录的效果，就和这个很类似，代码段基于JavaScript，根据你的情况使用，有时候是用CSS完成的这种功能。 <html> <head...
^ ^ 代码如下: <title>模仿easyui dialog的效果</title> [removed] //取得页面元素 var getElement = function() { return document.getElementById(arguments[0]) || false; } function openDialog...
`.overlay`层用于在弹出层显示时覆盖整个页面，并设置为半透明以达到模态框的效果。`.Popup`是弹出层的主体内容区域，其中`.Popup_top`包含标题和关闭按钮，`.Popup_cen`用于放置具体表单元素。 5. **使用JQuery...
`createScript(BufferedWriter bw)`方法用于生成一个简单的JavaScript函数`init()`，该函数会在页面加载时弹出一个警告框显示“初始化”。HTML的`<script>`标签被写入到`BufferedWriter`，使得JavaScript代码能够...
- **弹出大图**：当点击缩略图时，获取对应的大图源，显示在弹出层中，同样可以使用动画效果增强用户体验。 5. **图片预加载**：为了保证图片的快速显示，可以使用jQuery的`.load()`函数预先加载图片。 6. **自动化...
在这个场景中，“asp+ajax弹出框”指的是使用ASP技术来实现后端逻辑，并通过AJAX调用来更新前端显示一个弹出对话框的功能。 在Google的检索中，当你输入查询并点击搜索时，可能会看到一个下拉框，显示出与你输入...
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<head> <... charset=utf-8″ /> <...点击文字弹出层</title> <style type=”text/css”
在使用jQuery和Layer弹出层插件时，开发者可能会遇到一些常见的问题，这些问题往往与页面结构、DOM元素的使用以及框架的集成有关。本篇文章主要针对"jQuery使用Layer弹出层插件闪退问题"进行深入解析，帮助遇到类似...
弹出层是一种常见的用户界面元素，用于显示额外的信息或接收用户的输入，而不离开当前页面。实现弹出层通常涉及到HTML、CSS以及JavaScript的编程，可以使用原生JavaScript或者各种前端框架来创建。 模板引擎是处理...
首先，我们需要了解SpringMVC，它是一个强大的MVC（Model-View-Controller）框架，为Java Web应用程序提供了模型层、视图层和控制器层的分离，使得代码结构清晰，易于维护。在SpringMVC中，我们可以创建控制器方法来...
- **日历弹出层**：通过绝对定位的方式创建了一个隐藏的div元素，并设置了一些样式使其看起来像一个日历。还定义了一些鼠标事件处理函数来实现日期的选择逻辑。 #### 2. JSP与JavaScript的结合使用 虽然提供的代码...