如果要实现这样,你可以把下面的代码复制过去,我下面要弹出的窗体是2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<body >
<input type="button" value="弹出窗口" onclick="openwin()"/>
<input type="hidden" name="n"id="n" value="0"/>
<script language="javascript">
function openwin()
{
var n=document.getElementById("n")
if(n.value<=2) //这里改成你要限制的窗体数量
{
var win=window.open('2.html','_blank','resizable=no')
n.value++
document.body.innerHTML+=n.value
}
function a()
{
document.write("\<script\>alert('sdf')\</script\>")
}
}
</script>
</body>
</html>
然后你在2.html的body中添加如下代码:
<script>window.onbeforeunload=function(){window.opener.document.all.n.value-=1}</script>
这个要看具体的代码实现。如果代码实现是显示/隐藏原本在HTML中的元素，那就把隐藏的元素复制一份，JS代码复制一份改改名字就可以，虽然低端，胜在实现快。
如果是动态创建，那就复杂一点了，需要修改创建的元素的标识来分别对应不同的弹窗。包括创建的元素ID，创建出的元素的关闭按钮绑定事件等等。
如果考虑第三方组件，那就很多了，layerui里的layer组件是个不错的选择。
思路：
如果要输入多个信息，那么原生的提示框肯定不符合要求，需要自己定义。
一般都是使用div层模拟提示框，这样就可以随便布局了。
代码示例：
1、定义CSS<style type="text/css">
body {
height: 100%
overflow: auto
margin: 0
}
#test_Div {
position: fixed
_position: absolute
top: 50%
left: 50%
border: 2px solid #C0C0C0/*弹出框边框样式*/
background-color: #FFFFFF/*弹出框背景色*/
display:none
}
* html {
overflow: hidden
position: absolute
}
</style> 2、简单点，引入JQuery
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/js/jquery-ui-1.9.2.custom.min.js"></script> 3、弹出层
function show_Win(div_Win, tr_Title, event) {
var s_Width = document.documentElement.scrollWidth //滚动 宽度
var s_Height = document.documentElement.scrollHeight //滚动 高度
var js_Title = $(document.getElementById(tr_Title)) //标题
js_Title.css("cursor", "move")
//创建遮罩层
$("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body")
//获取弹出层
var msgObj = $("#" + div_Win)
msgObj.css('display', 'block') //必须先弹出此行，否则msgObj[0].offsetHeight为0，因为"display":"none"时，offsetHeight无法取到数据；如果弹出框为table，则为'',如果为div，则为block，否则textbox长度无法充满td
//y轴位置
var js_Top = -parseInt(msgObj.height()) / 2 + "px"
//x轴位置
var js_Left = -parseInt(msgObj.width()) / 2 + "px"
msgObj.css({ "margin-left": js_Left, "margin-top": js_Top })
//使弹出层可移动
msgObj.draggable({ handle: js_Title, scroll: false })
} 4、调用
<input type="button" value="测试弹出框" onclick="show_Win('div_Test', 'title', event)" />
<div id="div_Test">
<div id="title" style="border: 1px solid red">标题</div>
内容
</div>
