iframe里弹出的层显示在整个网页上

1.在子页面中做好弹窗布局以及css，备用

.showPopup{
	position: fixed;top: 0;background-color:rgba(0,0,0,0.3) ;width: 100%;height: 100%;
}
.showPopup>.Popupcotent{
	position: fixed; top: 47%;width:500px;left:20%;height: auto; background-color: #FFFFFF;
}
.showPopup>.Popupcotent>.PopupcotentTitle{
	background-color: #000000;color: #FFFFFF;height:60px;line-height: 60px;
}
.showPopup>.Popupcotent>.PopupcotentTitle>.titlename{
	padding-left:10px;font-size:20px;font-family:SimSun;font-weight:400;
}
.showPopup>.Popupcotent>.PopupcotentTitle>.titleclear{
	text-align: right;margin-top: 10px;width: 48%
}
.showPopup>.Popupcotent>.PopupcotentTitle>.titleclear>img{
	    vertical-align: inherit;
}
.showPopup>.Popupcotent>input{
	margin-top:20px;margin-left:15px; width: 94%;height: 50px;
}
.showPopup>.Popupcotent>button{
	width: 94%;margin-left: 15px;margin-top: 20px;height: 46px;margin-bottom: 20px;
}

 

2.在子页面中将整个要显示的弹窗编辑为字符串，赋值给一个变量，如：showdiv

3.使用window.parent.document.body.appendChild("showdiv")动态添加到首页。

var showdiv=document.createElement('div');				 
showdiv.setAttribute("class","showPopup");
showdiv.setAttribute('id','showPopuPassWord');
var tt="<div class='Popupcotent'>"+
		"<div class='flex PopupcotentTitle'>"+
		"<div class='width50 titlename'>交易密码	</div>"+
		"<div class='titleclear'>"+
		"<img src='img/cha.svg' onclick='HideShowPas()'/>"+						
		"</div></div>"+					
		"<input  value='' name='jiaoyiPassword' placeholder='交易密码8-20位数字+字母+特殊字符'/>"+
		"<button onclick='setPassWord()'>确定</button></div>";	
showdiv.innerHTML=tt;
window.parent.document.body.appendChild(showdiv);

 

4.关闭弹窗要使用window.parent.document.body.removeChild("showdiv")移除div,不能使用display做隐藏。

function HideShowPas(){
	var showdiv=document.getElementById('showPopuPassWord');
	window.parent.document.body.removeChild(showdiv);	
}