带背景遮罩的对话框：dijit.Dialog
这个对话框通用性非常好。而且显示效果比较友好，能给使用者很好的体验。而且无论是正常方式，还是编程方式，实现起来都比较简单。
对话框包括两种，一种是普通的对话框，一种是提示窗口的对话框，用起来都很方便。
下面是一个普通的对话框：
<html>
<head>
<title>Dialog</title>
<style type="text/css">
@import "../js/dojo/resources/dojo.css";
@import "../js/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true, isDebug: true"
src="../js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.Dialog");
function showDia(){
dijit.byId("dialog1").show();
}
</script>
<style>
.dijitDialogUnderlay {
background: #666666;
opacity: 0.5;
}
</style>
</head>
<body class="tundra">
<button id="b1" onclick="showDia()">显示dojo对话框</button> <br>
<div dojoType="dijit.Dialog" id="dialog1" closeNode="hider" title="填写表单">
<form onsubmit="return false;">
<table>
<tr>
<td><label for="name">姓名: </label></td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td><label for="loc">性别: </label></td>
<td><input type="text" id="loc"></td>
</tr>
<tr>
<td><label for="desc">年龄: </label></td>
<td><input type="text" id="desc"></td>
</tr>
<tr>
<td><label for="fileloc">电子邮件: </label></td>
<td><input type="file" id="fileloc"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="hider" value="填好了"></td>
</tr>
</table>
</form>
</div><br>
<br>
<select><option>看看对话框能不能挡住这个东西</option></select><br>
<br>
遮罩的颜色可以通过设置.dijitDialogUnderlay来控制
</body>
</html>
通过编程方式的一个对话框：
<html>
<head>
<title>Dialog</title>
<style type="text/css">
@import "../js/dojo/resources/dojo.css";
@import "../js/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true, isDebug: true"
src="../js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.Dialog");
function showDia(cont){
var pane=dojo.byId("Dpane");
if(!pane){
pane=document.createElement("DIV");
pane.setAttribute("id","Dpane");
pane.style.width = "300px";
document.body.appendChild(pane);
}
pane.innerHTML=cont;
var dia=new dijit.Dialog({title:"dojo对话框"},pane);
dia.show();
}
var alert=showDia;
</script>
<style>
.dijitDialogUnderlay {
background: #666666;
opacity: 0.5;
}
</style>
</head>
<body class="tundra">
<button id="b1" onclick="alert('测试编程方式')">显示dojo对话框</button> <br>
<br>
<select><option>看看对话框能不能挡住这个东西</option></select><br>
<br>
遮罩的颜色可以通过设置.dijitDialogUnderlay来控制
</body>
</html>
提示对话框的例子：
<html>
<head>
<title>Dialog</title>
<style type="text/css">
@import "../js/dojo/resources/dojo.css";
@import "../js/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true, isDebug: true"
src="../js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.form.DropDownButton">
<span>显示登录表单</span>
<div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="登录信息" closeNode="hider2">
<form onsubmit="return false;">
<table>
<tr>
<td><label for="user">用户名:</label></td>
<td><input type="text" id="user"></td>
</tr>
<tr>
<td><label for="pwd">密 码:</label></td>
<td><input type="password" id="pwd"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="hider2">登 录</button>
</tr>
</table>
</form>
</div>
</div>
<br>
<select><option>看看对话框能不能挡住这个东西</option></select><br>
<br>
这个弹出式的对话框使用DropDownButton来实现比较方便，如果想要通过其他方式实现可能需要一些dojo的编程。<br>
其实也可以使用dijit.MasterTooltip来实现类似的功能。<br>
</body>
</html>
分享到：
相关推荐
"【案例】loading遮罩demo 作者：Sakura.zip"是一个专注于提高用户体验的项目，由开发者Sakura创建。这个案例主要关注的是“加载中”（loading）指示器和遮罩层的应用，这是网页或应用在处理后台任务时，为用户提供...
2. 图形资源：可能包括用于遮罩的文字图形，以及其他背景或装饰元素。 3. ActionScript代码：Flash的编程语言，用于控制动画行为，例如动态改变遮罩形状或时间轴控制。 三、文字遮罩动画实现 在Flash中，实现文字...
- `modal`: 如果设置为`true`，则对话框将在背景上添加半透明遮罩，创建模态效果，用户无法与对话框外的页面元素交互。 3. **事件处理** Dialog支持多种事件，如`open`、`close`、`beforeClose`等，可以绑定回调...
3. **弹出对话框结构**：通常，一个弹出对话框由两部分组成：背景遮罩和对话框本身。背景遮罩用于半透明覆盖整个页面，对话框则包含实际内容。CSS3可以用来控制这两个元素的位置、大小、透明度等属性。 4. **定位...
1. 弹出层结构：定义一个可自定义样式的弹出层，通常包括背景遮罩和内容区域，内容区域可以承载文本、按钮或其他交互元素。 2. 触发机制：通过监听用户的特定行为（如点击按钮或链接）来触发弹出层的显示和隐藏。 3....
在本主题中，我们将深入探讨如何使用jQuery创建带有遮罩层的对话框。这样的功能通常用于显示警告、确认信息或者提供用户输入的界面。 首先，让我们了解什么是对话框（Dialog）。对话框是一种用户界面元素，它可以...
2. 引导用户注意力：在弹出对话框或执行关键操作时，遮罩层可以防止用户误触背景内容。 3. 创建模态效果：遮罩层配合弹窗使用，形成模态对话框，使用户必须处理当前窗口后再继续操作。 接下来，我们逐一解析这四种...
其中，`layer.open` 是 Layui 提供的一个用于弹出对话框的方法，它可以创建各种类型的窗口，如信息提示、页面层、iframe 层、加载层和提示层。然而，在实际使用过程中，用户可能会遇到一个问题，即在使用 `layer....
art.Dialog 是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。 功能： 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭...
在Flash动画制作中，遮罩技术是一项非常关键且实用的功能，它允许我们通过一个图形或影片剪辑来控制另一个图形或影片剪辑的可见性。本实例“Flash遮罩动画实例：卷纸动画.rar”就是一个很好的展示，让我们深入了解...
在本资源"jQuery遮罩背景弹出层对话框插件.zip"中，我们可以找到一个用于创建遮罩背景和弹出对话框的jQuery插件。这个插件可以帮助开发者快速实现页面中的模态窗口，比如警告提示、信息确认或用户输入等场景。 首先...
7. 屏幕截图：给未截图区域添加了灰色遮罩 8. 控件提示框：CTooltipCtrl 9. 半透明异形窗口：UpdateLayeredWindow并且能在异形窗口上显示窗口控件 10. 托盘图标：实际QQ闪烁效果，并添加双击弹出，右键菜单功能
2. 添加多个图层，分别用于背景、对象和引导层/遮罩层。 3. 在背景层上绘制或导入背景图片，设置好动画的场景。 4. 在对象层上放置你要移动或隐藏的对象。 5. 创建引导层，并在该层上绘制运动路径。 6. 将对象层的...
2. **CSS样式设置**：通过CSS对遮罩层（`.mask`）和对话框（`.dialog`）进行样式设置。遮罩层通常设置为全屏覆盖，背景色为黑色并带有透明度以显示下层内容。对话框则定义其位置、尺寸、内边距、边框以及相对父元素...
2. **CSS部分**：定义了对话框的基本样式，包括背景遮罩层、对话框容器、标题、内容区域、按钮等元素的样式。 四、使用步骤与实例 使用Zebra Dialog插件，通常需要以下几步： 1. **引入依赖**：在HTML文件中引入...
卡片悬停图文遮罩显示特效.rar 卡片悬停图文遮罩显示特效.rar 卡片悬停图文遮罩显示特效.rar 卡片悬停图文遮罩显示特效.rar 卡片悬停图文遮罩显示特效.rar 卡片悬停图文遮罩显示特效.rar 卡片悬停图文遮罩显示特效....
"JS移动端点击弹出遮罩层"这一功能就是一个典型的交互设计，它允许用户通过点击按钮来显示一个覆盖整个屏幕的半透明层，通常用于加载提示、模态对话框或者阻止背景操作等场景。下面将详细介绍如何使用JavaScript来...
- **带按钮的对话框**：Dialog插件允许我们添加自定义的按钮，例如“确定”和“取消”： ```javascript $("#dialog").dialog({ buttons: { "Ok": function() { alert("Ok"); }, "Cancel": function() { $(this...