<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
$(function(){
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
,beforeClose:function(){ $("#full").hide();}
});
});
function openDialog(){
var full = $("#full");
full.css("width",getClientW_H(1)+"px")
.css("height",getClientW_H(2)+"px").show();
$("#dialog").dialog("open");
}
window.onresize=function(){
$("#full").css("width",getClientW_H(1)+"px")
.css("height",getClientW_H(2)+"px");
}
function getClientW_H(type){
if(1==type){ //width
return Math.max(Math.max(document.body.scrollWidth,document.body.clientWidth),
Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth));
}else{ //height
return Math.max(Math.max(document.body.scrollHeight,document.body.clientHeight),
Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight))
}
}
</script>
<style type="text/css">
*{font-size:13px}
#full{position: absolute;background:#9DA7C3;left: 0;top: 0;display: none; z-index:2;filter:alpha(opacity=50);opacity :0.5}
</style>
</head>
<body>
<div>
<input type="button" id="btn" value="打开模式窗口" onclick="openDialog()"/><br>
<div id="full"></div>
<div id="dialog" title="系统提示">
这是dialog
</div>
</body>
</html>
分享到：
相关推荐
源码名称：遮罩窗口-给窗口增加半透明模糊遮罩。源码作者：邓学彬(泪闯天涯)。升级记录：。2.0：增加模糊背景；。2.1：修正遮罩抢焦点、修正一处GDI泄漏；。2.2：修复模糊背景的模式下，高度错误的问题；。@邓学彬。
在网页设计和开发中，"遮罩层"（Mask Layer）是一种常见的用户界面元素，用于在主页面上创建一个半透明或全透明的覆盖层，通常用于显示弹出窗口、模态对话框或者加载提示等。它使得用户无法与背景页面进行交互，直到...
遮罩层，也称为模态对话框或弹出窗口，会在主界面之上覆盖一层半透明或不透明的背景，聚焦用户的注意力到特定的警告、消息或表单上。这种设计模式广泛应用于网页、桌面应用以及移动应用中。下面将详细介绍"alert遮罩...
将模式窗口与选项卡功能结合起来，可以让用户在弹出的窗口中切换不同内容。一种实现方式是在模式窗口中嵌入选项卡元素，并在打开窗口时初始化选项卡： ```html 模式窗口"> ... ... ... ... ...
在这个过程中，添加遮罩层是实现模式弹窗的关键步骤，因为它能够确保用户在弹窗出现时只能与弹窗交互，而不能点击到弹窗背后的页面内容。 创建遮罩层主要涉及HTML和CSS技术。首先，我们需要在HTML中插入一个全屏...
`show`方法用于显示遮罩层，隐藏滚动条，并将遮罩层内容设置为表格模式。`hide`方法则用来隐藏遮罩层，恢复滚动条显示，并清空内部内容。`append`方法用于在遮罩层内添加新的内容，如大图。最后，`onclick`事件监听...
"jQuery手机端遮罩动画效果弹出层"是为适应触摸屏设备而设计的一种交互元素，它结合了遮罩层与动画效果，为用户在浏览过程中提供信息提示、表单填写等互动场景。下面我们将深入探讨这个主题，包括jQuery的基础知识、...
"jQuery图片动画遮罩层lightbox特效"是一个非常实用的工具，它利用JavaScript库jQuery和CSS3技术为网页图片添加动态遮罩层和Lightbox效果。下面将详细阐述这个特效的工作原理、实现方法以及相关知识点。 首先，...
2.解决多个弹出窗口中有一个窗口为模式对话框的情况下，关闭此模式对话框将不会取消模式遮罩层的问题 3.解决多个弹出窗口的情况下，点击后台窗口将其置于最上层的问题 下一步 1.多国语言化，主要是按钮的文字 2.提供...
在CSS中，可以设置遮罩层的`z-index`属性使其位于其他元素之上，`opacity`属性控制其透明度，而`background-color`则指定其颜色。当用户点击遮罩层时，弹出层会隐藏，这通常通过绑定jQuery的`click`事件来实现。 在...
同时，为了实现模式窗口效果，可以创建一个全屏的半透明遮罩层，覆盖在页面内容上，使得用户无法点击到背景内容。 3. **JavaScript控制**：使用JavaScript来控制弹出层的显示和隐藏。这可以通过添加或移除CSS类（如...
遮罩层是一种设计技术，用于在页面背景上添加半透明或全黑的覆盖层，以便突出显示特定的元素，如弹出窗口或对话框。在本案例中，遮罩层使得用户能够专注于当前操作的表单，同时防止他们误点击背景中的其他元素，提高...
3. **添加样式**：可能在`styles`文件夹中的CSS定义了窗口的样式，如位置、大小、背景颜色等，以及遮罩层的样式。 4. **事件绑定**：使用`.on()`方法绑定鼠标拖动事件，监听鼠标按下、移动和释放等事件，更新窗口的...
在现代网页开发中，模式化遮罩层是一种常见的用户界面元素，它能够阻止用户与遮罩层后面的页面内容进行交互，通常用于提示信息、模态对话框或其他需要专注处理的场景。通过实现遮罩层，开发者能够提升用户体验，增强...
关闭模式窗口时，记得同时隐藏遮罩层： ```javascript document.getElementById('closeButton').addEventListener('click', function() { document.getElementById('modalWindow').style.display = 'none'; ...
在网页设计中，模式窗口（Modal Window）是一种常见的交互元素，它可以在用户当前浏览的页面上弹出一个半透明的遮罩层，并显示一个独立的内容区域，用于展示警告、确认对话框或者更多详细信息。本示例是用div元素...
JQuery模式窗口是一种在网页中实现弹出对话框的技术，它允许用户在不离开当前页面的情况下与特定内容交互。在Web开发中，模式窗口经常用于显示警告、确认对话框、表单输入或者其他需要用户注意力的场景。JQuery库...
为了确保遮罩层在不同浏览器以及窗口大小变化时均能覆盖整个页面，需要监听窗口的`resize`事件，并在事件触发时调用`mask.setSize()`方法重新计算遮罩层的尺寸。此方法通过获取当前文档的宽度和高度，更新遮罩层元素...
2. **带遮罩层的弹出窗口**：在这种模式下，弹出窗口会伴随一个灰色半透明的遮罩层，遮罩层覆盖整个页面，使用户注意力集中于弹出窗口，避免了用户在弹窗出现时误操作其他部分。 3. **可定位在指定位置的弹出窗口**...