弹出窗口总结
使用了很多的主窗口中弹出的新的窗口，觉得很有必要研究一下，故就有了这篇文章。希望自己得到很大的提升。
首先，是正常的弹出一层窗口，没有和主窗口有交互的动作。此类问题比较简单。
比如：
<script type="text/javascript">
jQuery(function(){
jQuery("#preview").click(function(){
window.open("/admin-qual-preview!preview.do?mainId=$!_M.mainId","代码证预览",
"toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=no,status=no,
width="+screen.availWidth+",height="+screen.availHeight);
});
});
这里主要使用到了window.open()这个函数
经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。
【1、最基本的弹出窗口代码】
其实代码非常简单：
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html')
-->
</SCRIPT>
因为这是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。 window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(.. /)均可。 用单引号和双引号都可以，只是不要混用。 这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。 我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应页面的具体情况。
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no')
//写成一行
-->
</SCRIPT>
参数解释：
<SCRIPT LANGUAGE="javascript"> js脚本开始； window.open 弹出新窗口的命令； 'page.html' 弹出窗口的文件名； 'newwindowName' 弹出窗口的名字（不是文件名），非必须，可用空''代替； height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； </SCRIPT> js脚本结束
【3、用函数控制弹出窗口】
下面是一个完整的代码。
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//-->
</script>
</head>
<body onload="openwin()">
//...任意的页面内容...
</body>
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？
方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；
方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；
方法三：用一个连接调用：
<a href="#" onClick="openwin()">打开一个窗口 </a>注意：使用的“#”是虚连接。
方法四：用一个按钮调用：
<input type="button" onclick="openwin()" value="打开窗口">
【4、同时弹出2个窗口】
对源代码稍微改动一下：
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//-->
</script>
为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。
OK？
【5、主窗口打开文件1.htm，同时弹出小窗口page.html】
如下代码加入主窗口<head>区：
<script language="javascript">
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
打开一个窗口
<input type="button" onclick="openwin()" value="打开窗口">
</body>
</html>
看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。
【6、终极应用--弹出的窗口之Cookie控制】
回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)， 那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(
有解决的办法吗？Yes! ;-) Follow me.
我们使用cookie来控制一下就可以了。
首先，将如下代码加入主页面HTML的<HEAD>区：
<script>
function openwin(){
window.open("page.html","","width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}
</script>
然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！） 替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！
写到这里弹出窗口的制作和应用技巧基本上算是完成了
以上是比较常用的一种直接弹出方式，无论是直接的hmtl的打开还是使用action的处理跳转都可以轻松的实现这个功能。
其次讲解一个主副窗口有数据交互的一种情况和写法：
window.location.href()或者是document.location.href()是在替换本页面而打开新连接地址，而window.open()则是在本页面基础之上再打开新的窗口
pickupwindows的主窗口和副窗口有数据传递的一种情况。暂时不理解，希望能够搞懂它。
今天人真研究了一下pickupwindows的写法，总结的结果如下：
首先其中用到了pickupwindows.js,其次还有dhtmlxwindows.js,包含dhtmlxwindows.css
首先看pickupwindow的核心代码区：
var dhxWins;
var message;
function showAlert(alertMessage){
message = alertMessage;
dhxWins = new dhtmlXWindows();
dhxWins.enableAutoViewport(true);
dhxWins.attachViewportTo("winVP");
dhxWins.setImagePath("imgs/");
dhxWins.setEffect("maximize", false);
dhxWins.attachEvent("onContentLoaded",doOnContentLoader);
gw = dhxWins.createWindow("gw", 0, 0, 450, 300);
gw.setText("系统信息");
gw.setModal(false);
gw.centerOnScreen();
gw.attachURL("./alertWindow.html");
}
function doOnContentLoader(win){
//alert(win);
win._frame.contentWindow.showAlertMessage(message);
}
//这是最终弹出的那一段代码，负责调用dhxWins
function showModalWindow(windowName,url,callback,width,height){
alert("show Modal Window");
if(url.indexOf("rdm=")==-1){
if(url.indexOf("?")==-1){
url += "?rdm="+Math.random();
}else{
url += "&rdm="+Math.random();
}
}
dhxWins = new dhtmlXWindows();
dhxWins.enableAutoViewport(true);
dhxWins.attachViewportTo("div-content");
dhxWins.setImagePath("/comp/xWindows/imgs/");
if(callback==undefined||callback==""){
callback = defaultCallback;
}
dhxWins.attachEvent("onClose",callback);
dhxWins.setEffect("resize", false);
dhxWins.setEffect("max", false);
maxwidth = jQuery(document).width();
if(width==undefined||width==""||maxwidth<width){
width = maxwidth;
}
maxheight = jQuery(document).height();
if(height==undefined||height==""||maxheight<height){
height = maxheight;
}
gw = dhxWins.createWindow("gw", 0, 0, width, height,{});
gw.setText(windowName);
gw.setModal(true);
gw.denyMove();
gw.centerOnScreen();
gw.attachURL(url);
gw.button("minmax1").hide();
return gw;
//alert(win._frame);
}
function showWindowOnTop(window,url,callback,width,height){
alert("show window on top");
if(typeof(top.showModalWindowOnTop)=="function"){
eval("top.showModalWindowOnTop('"+window+"','"+url+"','"+callback+"','"+width+"','"+height+"');");
}else{
eval("showModalWindow('"+window+"','"+url+"','"+callback+"','"+width+"','"+height+"');");
}
}
function defaultCallback(){
return true;
}
//关闭窗口时调用
function closeModalWindow(o){
alert("close");
if(o){
o.dhxWins.window("gw").close();
}else{
parent.dhxWins.window("gw").close();
}
}
var md;
//在界面加载的时候，把写了pickupwindows的input标签对象引入，同时把其中的参数以metadata数组对象传入，以便加入一个按钮触发弹出框口
function pickupWindows(source,metadata){
alert("pickup Windows shit");
//alert("source = "+source[0]);
//alert("callbackFun = "+metadata.callbackFunc);
var url = metadata.url;
alert("url="+url)
if(!url){
showAlert("未设置打开的连接");
return;
}
var windowName = metadata.windowName;
if(!windowName){
windowName = "请选择";
}
var width = metadata.width;
if(!width){
width = 600;
}else if(width=="max"){
width = jQuery(document).width();
}
var height = metadata.height;
var maxheight = jQuery(document).height();
if(!height){
if(maxheight>500){
height = 500;
}else{
height = maxheight;
}
}else if(height=="max"){
height = maxheight;
}else if(height>maxheight){
height = maxheight;
}
var randId = Math.round(Math.random()*10000)+"";
jQuery(document).data(randId,metadata);
md = metadata;
alert(source.attr("tagName")+","+source.attr("type"));
if((source.attr("tagName")=="INPUT"&&source.attr("type")=="text")||source.attr("tagName")=="TEXTAREA"){
//正常的是走这个流程，获取text中的pickupwindows中的一些个属性，然后进行添加一个button的操作动作
source.after("<input type=\"button\" class=\"showinput\" value=\"...\" onclick=\"showWindowInPickupWindow('"+randId+"','"
+windowName+"','"+url+"',"+width+","+height+")\">");
if(metadata.targetName){
//使得文本输入框input为只读
jQuery("#"+metadata.targetName).attr("readonly",true);
}
}else if(source.attr("tagName")=="INPUT"&&source.attr("type")=="button"){
alert(2);
source.bind("click",function(event){
showWindowInPickupWindow(randId,windowName,url,width,height);
});
}else if(source.attr("tagName")=="A"){
alert(3)
source.attr("href","#");
source.bind("click",function(event){
showWindowInPickupWindow(randId,windowName,url,width,height);
});
}
}
//由上面函数生成的按钮调用
function showWindowInPickupWindow(id,windowName,url,width,height){
alert("show window in pick up window");
alert("id="+id+",winodwName="+windowName+",url="+url+",width="+width+",height="+height);
//读取弹出页面的参数
var params = "";
try{
params = getParamsForPickupWindow();
}catch(e){
}
if(params.length>0){
if(url.indexOf("?")==-1){
url += "?"+params;
}else{
url += "&"+params;
}
}
var modWindow = showModalWindow(windowName+"-"+id,url,callbackFunc,width,height);
}
//关闭modelwindow的时候调用这个函数，其主要是返回了两个参数id和name两个值以供主页面使用。
function callbackFunc(win){
alert("callbackFunc");
var splited = win.getText().split("-");
if(splited.length>0){
md = jQuery(document).data(splited[splited.length-1]);
}
if(!md.callbackFunc&&(!md.targetId||!md.targetName)){
alert("系统错误,请和管理员联系!");
}else{
var idMethod = "getSelectedId";
if(md.selectIdMethod){
idMethod = md.selectIdMethod;
}
var nameMethod = "getSelectedName";
if(md.selectNameMethod){
nameMethod = md.selectNameMethod;
}
var selectedId="",selectedName="";
try{
selectedId = eval("win._frame.contentWindow."+idMethod+"()");
//alert("id selected : "+selectedId);
}catch(e){
}
try{
selectedName = eval("win._frame.contentWindow."+nameMethod+"()");
//alert("name selected : "+selectedName);
}catch(e){}
if(md.callbackFunc){
eval(md.callbackFunc+"('"+selectedId+"','"+selectedName+"');");
}else{
settedId = document.getElementById(md.targetId);
settedName = document.getElementById(md.targetName);
if(!settedId){
alert("ID["+md.targetId+"]不存在,无法设值!");
}else{
jQuery("#"+md.targetId).val(selectedId);
}
if(!settedName){
alert("NAME["+md.targetName+"]不存在,无法设值!");
}else{
var tagtype = jQuery("#"+md.targetName).attr("tagName");
if(tagtype=="INPUT"||tagtype=="textarea"){
jQuery("#"+md.targetName).val(selectedName);
}else{
jQuery("#"+md.targetName).text(selectedName);
}
}
}
//alert(selectedId+" --> "+selectedName);
}
return true;
}
页面的代码如下：
<head>
#import(["jquery","validate","#component","xDate","upload","pickupWindows","dwr"])
<script type="text/javascript">
function saveSubmit(){
//校验附件
var attsList = document.getElementsByName('attachids');
if(attsList.length==0){
alert("请上传资格证书扫描件.");
return;
}
//提交
jQuery("#editForm").submit();
}
function addDetail(){
if("$!_M.mainId"==""){
alert("请先保存主项资质，然后再添加增项资质");
return;
}
document.location.href="$base/t-qualification-add!edit.do?mainId=$!_M.mainId&enterpriseId=$!_M.enterpriseId";
}
function setRange(id,name){
//设值
jQuery("#typeLevel").val(id);
var array = name.split("-");
jQuery("#qualificationMainName").val(array[0]);
//重置范围
var level = jQuery("#typeLevel").val();
if(level!=null&&level!=""){
//清空范围
jQuery("#businessRange").val('');
_ajax.getCQualification(level,{
callback:function(qual){
if(qual!=null){
jQuery("#businessRange").val(qual.scope == null? "":qual.scope);
}
}
});
}
}
jQuery(function(){
jQuery("#preview").click(function(){
window.open("/admin-qual-preview!preview.do?mainId=$!_M.mainId","代码证预览", "toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=no,status=no, width="+screen.availWidth+",height="+screen.availHeight);
});
});
function getCertificateNoMessage(){
var message = "该证书在系统中已经存在!";
jQuery.ajax({
method:'post',
url:'$base/t-qualification-main!getCertificateNoMessage.do',
data:{
mainId:"$!_M.mainId",
certificateNo:jQuery("#certificateNo").val()
},
async:false,
success:function(response){
message = response;
},
error:function(data){
message = "该证书在系统中已经存在!";
}
});
return message;
}
</script>
</head>
<div id="div-title">
<div id="title"><span>主项资质</span></div>
</div>
<form id="editForm" name="editForm" action="${defaultSaveUri}" validate="true" method="post">
<input type="hidden" name="_M.enterpriseId" value="$!_M.enterpriseId">
<input type="hidden" name="enterpriseId" value="$!enterpriseId">
<input type="hidden" name="_M.mainId" value="$!_M.mainId">
<div id="div-content">
<table id="form-table" class="formtable" >
<tr>
<!--
<td class="nametd">行业类型</td>
<td>
<select name="_M.industryType" id="industryType" value="$_M.industryType" data="{v:{required:true}}">
<option value="$!tl.uuid">--请选择--</option>
#foreach($tl in $tradeList)
<option value="$!tl.uuid" #if($tl.uuid==$_M.industryType) selected='selected' #end>$!tl.name</option>
#end
</select>
</td>
-->
<td width="17%" class="nametd">资质类别及等级</td>
<td width="33%">
<input type="hidden" name="_M.typeLevel" id="typeLevel" value="$!_M.typeLevel" data="{v:{required:true}}"/>
<input type="text" id="qualificationMainName" value="$!qualification.name" component="pickupWindows"
data="{pickupWindows:{callbackFunc:'setRange',url:'${base}/pickup-windows!qualification.do',windowName:'资质类别及等级选择',targetId:'typeLevel',targetName:'qualificationMainName',width:'450'}}"/>
</td>
<td class="nametd">证书编号</td>
<td><input type="text" name="_M.certificateNo" id="certificateNo" value="$!_M.certificateNo"
data="{v:{required:true,maxlength:30,gboatremote:{url:'$base/t-qualification-main!checkCertificateNo.do?mainId=$!_M.mainId',noCheckValue:'$!_M.certificateNo',cache:false,messages:{gboatremote:getCertificateNoMessage}}}}"/></td>
</tr>
<tr>
<td class="nametd">发证机关</td>
<td><input type="text" name="_M.certificateIssuer" id="certificateIssuer" value="$!_M.certificateIssuer" data="{v:{required:true,maxlength:60}}"/></td>
<td class="nametd">发证时间</td>
<td><input type="text" name="_M.certificateDate" id="certificateDate" value="$!_M.certificateDate" data="{v:{required:true},xDate:{format:'yyyy-MM-dd'}}" component="xDate"/></td>
</tr>
<tr>
<td class="nametd">资质有效期始</td>
<td><input type="text" name="_M.validStartDate" id="validStartDate" value="$!_M.validStartDate" data="{v:{required:true},xDate:{format:'yyyy-MM-dd'}}" component="xDate"/></td>
<td class="nametd">资质有效期至</td>
<td colspan="3"><input type="text" name="_M.validDate" id="validDate" value="$!_M.validDate" data="{v:{required:true, compareDateGreater:['validStartDate','有效期至时间必须大于有效期始']},xDate:{format:'yyyy-MM-dd'}}" component="xDate"/></td>
</tr>
#if("$!role" == "E")
<tr>
<td class="nametd">资质状态</td>
<td colspan="3">
#if("$!_M.mainId" == "")
正常
#elseif("$!_M.pause" == "Y")
暂停资质
#elseif("$!_M.validDate"!="" && $date.toDate($date.systemDate).after($date.toDate($!_M.validDate)))
过期
##"2592000000"--指的是天数(30)对应的毫秒数
#elseif("$!_M.validDate"!="" && $date.toDate($date.systemDate).before($date.toDate($math.sub($!_M.validDate.getTime(), $!math.mul($!warn.enterQualDate, 86400000)))))
正常
#else
即将过期
#end
</td>
</tr>
#end
#if("$!role" == "E")
<input type="hidden" name="_M.pause" #if("$!_M.pause" == "") value="N" #elseif("$!_M.pause" != "") value="$!_M.pause" #end />
#end
#if($priority.havePriority($request,"$!{resourceCode}.stop_cert"))
<tr>
<td class="nametd">是否暂停业务</td>
<td colspan="3">
<input type="radio" name="_M.pause" #if("$!_M.pause" == "N" || "$!_M.pause" == "") checked #end value="N" style="width:20px;border-width:0px;vertical-align:middle" /> 否 <input type="radio" name="_M.pause" value="Y" #if("$!_M.pause" == "Y") checked #end style="width:20px;border-width:0px;vertical-align:middle"/> 是
</td>
</tr>
#end
<tr>
<td class="nametd">可承担业务范围</td>
<td colspan="3"><textarea name="_M.businessRange" id="businessRange" data="{v:{maxlength:1300}}">$!_M.businessRange</textarea></td>
</tr>
<tr>
<td class="nametd">资格证书扫描件<span style="color:red">*</span><br><input type="hidden" data="{v:{attachment:'资质证书'}}"/></td>
<td colspan="3">#attsvaild("editForm" $!atts)</td>
</tr>
</table>
<div class="listtitle">
<span class="right">
<a href="#" onclick="addDetail()">添加增项资质</a>
</span>
<h2>增项资质</h2>
</div>
<table id="list-table" class="listtable" border="0" rules="none">
<thead>
<tr>
<td>序号</td>
<td>资质类别及等级</td>
<td>操作</td>
</tr>
</thead>
#foreach($item in $adds)
<tr>
<td>$velocityCount</td>
<td>$!item.name</td>
<td>
<a id="editlink" class="operalink" href="$base/t-qualification-add!edit.do?SID=$item.addId&mainId=$item.mainId&enterpriseId=$!_M.enterpriseId" onclick="">编辑</a>
<a id="dellink" class="operalink" href="$base/t-qualification-add!delete.do?SID=$item.addId&mainId=$item.mainId&enterpriseId=$!_M.enterpriseId" onclick="">删除</a>
</td>
</tr>
#end
</table>
</div>
<div id="div-opera">
<input type="submit" class="operainput" id="saveBt" name="saveBt" value="保存" onclick=""/>
<input type="button" class="operainput" id="returnBt" name="returnBt" value="返回" onclick="#back("${defaultListUri}?enterpriseId=$!enterpriseId")"/>
#if("$!_M.mainId" != "")
<input type="button" class="operainput" id="preview" name="previewBt" value="#if("$!roleCode"=="E")查看#else审核#end" />
#end
</div>
</form>