HTML窗口与对话框

窗口指的是一个新的浏览器窗口或是标签页，窗口有地址； 对话框是在当前窗口打开一个简易的交互框，对话框没有地址； 模态对话框则需要在关闭对话框的状况下才能对父窗口操作。

浏览器窗口（Window）

window 是浏览器默认的对象， 该对象有一个open()方法打开一个新的浏览器窗口或是标签页。window.open的具体语法如下：

window.open(URL,name,specs,replace)

• URL， 可选参数， 页面的地址，没有指定则打开一个空白页。
• name，可选参数。窗口的名字
• specs, 可选参数， 用于设置新开窗口的属性， 以逗号分割。

早期的IE浏览器，该方法会打开一个新的浏览器窗口。 在现在的浏览器中，基本都是打开新的Tab（标签页）。
常见的示例类似：

1. 打开一个空白新窗口

<input type="button" value="打开窗口" onclick="window.open()"/>

2. 打开一个包含地址的新Tab窗口

<input type="button" value="打开窗口" onclick="window.open('https://www.baidu.com')"/>

在没有指定新窗口的名字的状况下， 以上按钮每次点击都会打开一个新窗口，也就是默认状况下，窗口的名字是 _blank , _blank 是浏览器窗口名的保留关键字，也可以自行指定窗口的名字，这样的话，如果该名字的窗口已经打开，则后续不管点击多少次，都会在原窗口显示。示例类似：

<input type="button" value="打开窗口" onclick="window.open('https://www.baidu.com','new-window')"/>

除了_blank之外，还可以使用的浏览器本身的窗口名有：

• _parent 父窗口
• _self 当前窗口
• _top 顶层窗口

处理使用window对象的open方法打开新窗口， 也可以使用超链接标签<a>实现，类似：

<a href="https://www.baidu.com" target="_blank">新开窗口超链接</a>

浏览器对话框（Dialog）

对话框是在窗口中弹出的一个小的界面，一般不需要独立的地址， 常用来显示显示一些提示信息或互动的按钮。window对象提供了alert、confirm方法用于处理对话框。 常见的对话框有三种：

1. 消息框 window.alert() 或者直接使用 alert()

<input type="button" value="打开对话框" onclick="window.alert('Hello')"/>

在JS中，也可以省略window， 直接写方法即可。

2. 确认对话框 confirm()
   确认对话框的方法同样接受一个String类型的参数用于显示确认信息。

 <input type="button" value="confirm对话框" onclick="confirm('Hello')"/>

确认对话框包含确认和取消两个按钮，并且能返回一个布尔类型的值。

点击“确认”的时候返回true, 点击 “取消” 返回 false。使用的代码类似

if(confirm('Hello')==true){
}

3. 输入框对话框 prompt()
   输入框对话框包含一个输入框用于接受用户的输入， 该方法的语法是：

prompt(msg, defaultValue) 

• msg 输入框的消息
• defaultValue， 输入框的默认值。

该方法的返回值是输入框的值。

<input type="button" value="prompt对话框" onclick="prompt('消息','输入框默认值')"/>

示例效果如下：

模态（ModalDialog）对话框

上面的窗口和对话框打开的时候， 原父类窗口都是可以点击的。有些时候，需要在对话框关闭之后才允许操作父窗口，这种打开后不允许操作父窗口的对话框即模态对话框。
IE和Firefox都支持window.showModalDialog() 方法打开一个模式对话框， 比如：

<input type="button" value="modal对话框" onclick="window.showModalDialog('https://www.baidu.com')"/>

但是， Chrome浏览器不支持这个方法， 早期的替代方式是使用window.open()方法。在HTML 5 中可以使用 <dialog>标签实现， 但是目前各浏览器对这个标签的支持并不是很好。
所以， 开发中模态对话框更常见的实现是使用既有的框架实现， 这些框架主要使用div层实现， 比如JQuery, VUE(Element UI) 和Ext JS都提供很不错的实现。