原生JS 有3种最常用的弹窗方式
最最最常用的是 alert()
alert 引发的弹窗，只有一个“确定”按钮。
alert( 内容 )
内容可以是变量，可以是字符串。
字符串需要用单引号或者双引号括起来。
需要注意的是，内容如果是 html 标签，是会直接输出字符串的。
如果需要换行，需要用到 html 的转义字符。
alert 无法直接展示 object。
confirm 对比 alert，会多出一个“取消”按钮。
而且 confirm 有一个回调值。
如果点击了“确定”，返回值为：true
如果点击了“取消”，返回值为：false
prompt 的比 confirm 多一个输入框。
同样，prompt 也是有返回值的。
如果按了确定，返回值是 输入的内容，字符串型。
如果按了取消，返回值是：null。
js中弹出窗口：open
<html><head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>弹窗示例</title>
</head>
<script language="javascript">
<!--
//打开模式窗口
function open1(){
//设置模式窗口的一些状态值
var windowStatus = "dialogWidth:460pxdialogHeight:380pxcenter:1status:0"
//在模式窗口中打开的页面
var url = "test.html"
//将模式窗口返回的值临时保存
var temp = showModalDialog(url,"",windowStatus)
//将刚才保存的值赋给文本输入框returnValue
document.all.returnValue.value = temp
}
//打开全屏窗口
function open3(){
//设置窗口的一些状态值
var windowStatus = "fullscreen = 1"
//在窗口中打开的页面
var url = "test.html"
window.open(url,"noMenuWindowName",windowStatus)
}
-->
</script>
<body>
<input type="button" name="btn1" value="打开窗口" onClick="open1()">
<br>
从窗口返回的值：
<input type="text" id="returnValue" name="returnValue">
</body>
</html>
弹出的窗口2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function setV(){
//把值返回给父窗口
window.opener.document.all.ff.value="usr"
window.close()
}
</script>
</head>
<body>
<input type="button" onclick="setV()" value="保存"/>
</body>
</html>
模态和非模态的区别在于，模态窗体弹出后需要将其窗体关闭后才能进行除该窗体以外的其他操作，通俗点说就是除了该窗体上的操作，其他的操作都无效原生JS用法：
模态：window.showModalDialog（非标准）
非模态：window.showModelessDialog（IE5+，非标准），window.open（所有浏览器，标准）
不推荐使用以上三种方法实现模态窗体，原因有二：
一是以上方法在各个浏览器上表现各不一样，不一定能兼容所有主流浏览器（未测试，但我知道肯定不行）
二是如今大多数现代浏览器会屏蔽掉弹出窗体，会给您实现功能造成极大的障碍
使用JS模拟弹出窗体：
使用层（一般是div）模拟一个窗体，将其放置在所有层之上，加上希望的功能，比如close,resize等等，其中的内容如果是其他页面，我们可以用iframe，这些都很灵活，可以自己定义规则，这样就形成了一个非模态窗体。
在上面的基础上，在窗体层下放置一个mask层，其作用在于不让操作除窗体层以外的内容，最后将mask层设置为深色并且半透明，这样就形成了一个模态窗体了。
以上只是原理，毕竟自己来做很恼火，当今主流js框架都实现了类似的功能，比如jQuery,ext等，用法也很简单，也很兼容各种主流浏览器，所以使用js框架来实现是最推荐的
希望对您有帮助~
By Billskate
