Dojo學習9 帶背景遮罩的對話框：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>javascript
經過編程方式的一個對話框：
<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>css
<br>
<select><option>看看對話框能不能擋住這個東西</option></select><br>
<br>
遮罩的顏色能夠經過設置.dijitDialogUnderlay來控制html
</body>
</html>java
提示對話框的例子：
<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>
demo的加載速度可能比較慢，請耐心等待。demo地址：
http://www.dojocn.cn/dojo/demo/13_testDialog2.htm
http://www.dojocn.cn/dojo/demo/13_testDialog1.htm
http://www.dojocn.cn/dojo/demo/13_testDialog.htmapp
- 1. qt 對話框 遮罩背景
- 2. 點擊遮罩層的背景關閉遮罩層
- 3. 點擊按鈕彈出表單對話框帶透明遮罩
- 4. MFC對話框背景
- 5. 前端：兩種實現帶背景遮罩的彈窗寫法
- 6. 移動端-帶有背景遮罩層的居中提示彈框（消滅bug③）
- 7. 設置半透明遮罩背景
- 8. 給背景圖片加顏色遮罩
- 9. element-ui 對話框中嵌套對話框及其遮罩層關閉問題
- 10. C# WPF遮罩對話框（Popup Message Overlay/ Dialog Host）
- 更多相關文章...
- • ionic 對話框 - ionic 教程
- • ionic 背景層 - ionic 教程
- • 適用於PHP初學者的學習線路和建議
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。