在网页开发中，模态窗体（Modal Window）是一种常用的设计元素，用于向用户展示重要的信息、确认操作或收集输入数据。模态窗体的特点是它会暂停主页面的交互，直到用户与其交互并关闭为止。本文将详细介绍模态窗体的几种形式，并通过具体的代码示例来解释如何实现它们，尤其是与`showModalDialog`相关的应用。
1. **基本模态对话框**：
`showModalDialog`是JavaScript中用于创建模态对话框的一个函数。其基本语法为：
```javascript
window.showModalDialog(url, [startingValue], [features]);
```
- `url`：指定对话框加载的URL，可以是一个HTML页面。
- `startingValue`：可选参数，用于传递初始值到新窗口。
- `features`：可选参数，定义对话框的特性，如宽度、高度、位置等。
2. **自定义模态框**：
除了使用`showModalDialog`，我们还可以使用HTML、CSS和JavaScript自定义模态框。这种方法更灵活，可以更好地控制样式和交互。下面是一个简单的自定义模态框示例：
```html
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>这是模态框内容</p>
</div>
</div>
```
```css
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
```
```javascript
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {modal.style.display = "none";}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
```
3. **Bootstrap模态框**：
Bootstrap框架提供了现成的模态框组件，只需添加相应的HTML结构和类名即可。例如：
```html
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
```
4. **jQuery UI Dialog**：
jQuery UI 提供了可定制的对话框插件，创建模态框同样简单：
```html
<button id="openDialog">Open Dialog</button>
<div id="dialog" title="Dialog Title">
这是一个模态对话框
</div>
```
```javascript
$(function() {
$("#dialog").dialog({
modal: true,
width: 'auto',
height: 'auto',
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
});
```
这些不同的模态窗体形式都可以提高网页的用户体验，根据项目需求选择适合的实现方式。记住，良好的设计应该考虑到用户友好性和易用性，而模态窗体正是实现这一目标的有效工具。通过实践和学习，你可以熟练掌握各种模态框的实现技巧，为你的网页增添更多交互性。
模态窗体showModalDialog的几种形式.zip （4个子文件） 
showModalDialog等案例 
test.html 526B
