使用Javascript创建付款操作的弹出层

关键词：Javascript, 弹出层

涉及代码：

设计思路：在商品页面有一个付款按钮，点击该按钮即进行购买操作，背景变灰禁用，弹出一个确认对话框，在该对话框里填写收货地址等信息，然后点击按钮提交，进入下一步操作。

首先讲解下Javascript 里的 createElement 函数。

1.创建链接

2.创建DIV

< language="javascript"> var docbody = document.body; //创建DIV function createDIV(text) { var div = document.createElement("div"); div.innerHTML = text; docbody.appendChild(div); } createDIV("百度：http://www.baidu.com/");

3.创建表单项

< language="javascript"> var o = document.body; //创建表单项 function createInput(sType,sValue) { var input = document.createElement("input"); input.type = sType; input.value = sValue; o.appendChild(input); } createInput("button","按钮");

4。创建表格

< language="javascript"> var o = document.body; //创建表格 function createTable(w,h,r,c) { var table = document.createElement("table"); var tbody = document.createElement("tbody"); table.width = w; table.height = h; table.border = 1; for(var i=1;i<=r;i++) { var tr = document.createElement("tr"); for(var j=1;j<=c;j++) { var td = document.createElement("td"); td.innerHTML = i + "" + j; //td.appendChild(document.createTextNode(i + "" + j)); td.style.color = "#FF0000"; tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); o.appendChild(table); } createTable(270,270,9,9);

之后要做的操作有2步，第一，将原来的页面变灰禁用，第二，在上层弹出付款操作窗，付款不完成，底层页面不可以操作。

要实现第一步，我们可以采用在上面覆盖一层的方法，利用css的z-index属性，设置为998，她上面一层设置为999，达到覆盖的目的。

第998层：

var p=document.createElement("DIV"); var info="<iframe align='center' src="http://127.0.0.1/fengTree/pay/index.php" mce_src="http://127.0.0.1/fengTree/pay/index.php" frameBorder='0' width='690' scrolling='no' height='450'></iframe>"; p.id="p"; p.style.position="absolute"; p.style.width=document.body.scrollWidth;//获取浏览器当前宽度 p.style.height=(document.body.offsetHeight>document.body.scrollHeight)?'100%':document.body.scrollHeight;//获取浏览器当前高度 p.style.zIndex='998'; p.style.top='0px'; p.style.left='0px'; p.style.backgroundColor="#000"; p.style.opacity='0.7'; p.style.filter="alpha(opacity=70)"; document.body.appendChild(p);//添加节点

第999层：

var p1=document.createElement("DIV"); p1.id="p1"; p1.style.zIndex='999'; p1.style.position="absolute"; p1.style.width="700px"; p1.style.height="500px"; p1.style.top='30px'; p1.style.left=Math.ceil(((document.body.scrollWidth)-parseInt(p1.style.width.replace('px','')))/2)+document.body.scrollLeft +'px'; p1.style.backgroundColor="#fff"; p1.style.border="2px solid #f60"; p1.style.overflow="hidden"; var html="<center>"; html+="<div style='height:24px;700px;font-size:12px;line-height:24px;padding-left:10px;font-weight:bold;text-align:left; color:#fff;background:#f50'><div style="float:left" mce_style="float:left">付款提示</div><div style="float:right; font-size:20px; font-weight:bold; padding-right:10px; " mce_style="float:right; font-size:20px; font-weight:bold; padding-right:10px; "><a href="javascript:this.cancle()" mce_href="javascript:this.cancle()" style="float:right; color:#fff;text-decoration:none" mce_style="float:right; color:#fff;text-decoration:none">×</a></div></div>"; html+="<div style='height:480px;700px;background:#fff;overflow:hidden;padding-top:20px;font-size:12px'>"+info+"</div>"; html+="<div class='p1'></div>"; html+="</center>"; document.body.appendChild(p1); p1.innerHTML=html; var arr=document.getElementsByTagName("select"); var i=0; while(i<arr.length){ arr[i].style.visibility='hidden'; i++; }

然后将上面两层的代码一并写入到一个函数中，以方便点击按钮时调用：

function dlgPay(){ //第998层代码 //第999层代码 this.cancle=function(){ document.body.removeChild(document.getElementById('p')); document.body.removeChild(document.getElementById('p1')); var arr=document.getElementsByTagName("select"); var i=0; while(i<arr.length){ arr[i].style.visibility='visible'; i++; } }

最后，在按钮里添加调用即可，注意将以上代码存储为 show.js（当然名称随意）。

<mce:script src="show.js" mce_src="show.js" language="javascript"></mce:script> <input value="点击弹出" type="button" onClick="dlgPay()" />

注意，之前的时候我在代码里加入了 type="application/javascript" 则在ie下始终都掉不出来，去掉之后就可以了。