如何让浏览器弹出一个新窗口，在新窗口关闭前让原窗口不可操作？

时间：2021-02-08 23:41:56
页面A上有一个按扭

用户点了按扭以后，要弹出一个新的页面B

页面B上有选项，用户选了一个选项以后

把选项的值带回到页面A

在用户选择期间A页面是不可操作的


不知道用HTML怎么实现

谢谢大家

7 个解决方案

#1

是用js来实现的，，，，，，，，，，，，，

#2

自己去试试看

<!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" lang="zh-CN">

<head>
<title>点击弹出窗口层，并且背景变暗渐变</title>
<style>
body {font-size:12px;background:#9EC7E7}
img {border:0px}
#msgDiv {
    z-index:10001;
    width:500px;
    height:400px;
    background:white;
    border:#336699 1px solid;
    position:absolute;
    left:50%;
    top:20%;
    font-size:12px;
    margin-left:-225px;
    display: none;
}
#bgDiv {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    background-color: #777;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
    opacity: 0.6;
}
</style>
<script type="text/javascript"> 
function showDetail() {
//背景
  var bgObj=document.getElementById("bgDiv");
  bgObj.style.width = document.body.offsetWidth + "px";
  bgObj.style.height = screen.height + "px";

//定义窗口
  var msgObj=document.getElementById("msgDiv");
  msgObj.style.marginTop = -75 +  document.documentElement.scrollTop + "px";

//关闭
  document.getElementById("msgShut").onclick = function(){
  bgObj.style.display = msgObj.style.display = "none";
  }
  msgObj.style.display = bgObj.style.display = "block";
}
</script>
</head>

<body>

<div id="msgDiv">
<div id="msgShut">
关闭</div>
<div id="msgDetail">
</div>
</div>
<div id="bgDiv">
</div>
<p>　</p>
<p><a href="#" onClick="showDetail()">点这里</a></p>

</body>

</html>

#3


2楼的朋友是用DIV+CSS实现的 

但是我要求的是用HTML+JavaScript

实现

呵呵~

就是弹出的不是一个DIV

而是一个新的浏览器窗口

但还是很感谢你

欢迎大家继续

#4

用 showModalDialog（） 试试

#5



<input type="button" onclick="Report(800,600,800,600,'sample');return false;"/>

<!--参数说明，横纵坐标，长和宽，遮罩层的ID-->

<div id="sample" style="display:none; ">

<!--放置你要弹出的页面，可以用iframe实现-->

</div>



// JScript 文件


var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;


function gid(id) {

return document.getElementById?document.getElementById(id):null;

}



function Browser() {

var ua, s, i;

this.isIE = false;

this.isNS = false;

this.isOP = false;

this.isSF = false;

ua = navigator.userAgent.toLowerCase();

s = "opera";

if ((i = ua.indexOf(s)) >= 0) {

this.isOP = true;return;

}

s = "msie";

if ((i = ua.indexOf(s)) >= 0) {

this.isIE = true;return;

}

s = "netscape6/";

if ((i = ua.indexOf(s)) >= 0) {

this.isNS = true;return;

}

s = "gecko";

if ((i = ua.indexOf(s)) >= 0) {

this.isNS = true;return;

}

s = "safari";

if ((i = ua.indexOf(s)) >= 0) {

this.isSF = true;return;

}

}


function DialogLoc() {

var dde = document.documentElement;

if (window.innerWidth) {

var ww = window.innerWidth;

var wh = window.innerHeight;

var bgX = window.pageXOffset;

var bgY = window.pageYOffset;

} else {

var ww = dde.offsetWidth;

var wh = dde.offsetHeight;

var bgX = dde.scrollLeft;

var bgY = dde.scrollTop;

}

t_DiglogX = (bgX + ((ww - t_DiglogW)/2));

t_DiglogY = (bgY + ((wh - t_DiglogH)/2));

}


function DialogShow(showdata,ow,oh,w,h) {

var objDialog = document.getElementById("DialogMove");

if (!objDialog) objDialog = document.createElement("div");

t_DiglogW = ow;

t_DiglogH = oh;

DialogLoc();

objDialog.id = "DialogMove";

var oS = objDialog.style;

oS.display = "block";

oS.top = t_DiglogY + "px";

oS.left = t_DiglogX + "px";

oS.margin = "0px";

oS.padding = "0px";

oS.width = w + "px";

oS.height = h + "px";

oS.position = "absolute";

oS.zIndex = "5";

oS.background = "#FFF";

oS.border = "solid #DCEBFF 1px";

objDialog.innerHTML = showdata;

document.body.appendChild(objDialog);

}


function DialogHide() {

ScreenClean();

var objDialog = document.getElementById("DialogMove");

if (objDialog) objDialog.style.display = "none";

}


function ScreenConvert() {

var browser = new Browser();

var objScreen = gid("ScreenOver");

if (!objScreen) var objScreen = document.createElement("div");

var oS = objScreen.style;

objScreen.id = "ScreenOver";

oS.display = "block";

oS.top = oS.left = oS.margin = oS.padding = "0px";

//z-index

oS.width = "100%";

oS.height = "1400px";;

oS.position = "absolute";

oS.zIndex = "3";

if ((!browser.isSF) && (!browser.isOP)) {

oS.background = "#FDFDFD";

} else {

oS.background = "#F0F0F0";

}

oS.filter = "alpha(opacity=40)";

oS.opacity = 40/100;

oS.MozOpacity = 40/100;

document.body.appendChild(objScreen);

}


function ScreenClean() {

var objScreen = document.getElementById("ScreenOver");

if (objScreen) objScreen.style.display = "none";

}



function Report(width,height,width_align,height_align,div_id)

{

   //var PostData = "do=" + Type + "&reportid=" + ID;

   //PostRequest(window.location.protocol + "//" + window.location.host + "/AJAX_Comm.aspx", PostData);

   var showData = document.getElementById(div_id).innerHTML;

   //ScreenConvert();DialogShow("<div id=\"DialogLoading\">正在读取,请稍候...</div>",110,10,124,20);

   ScreenConvert();

   DialogShow(showData,width,height,width_align,height_align);


}

function display(){

ScreenClean();

DialogHide()

}

#6

引用 4 楼 wang_wenhui 的回复:
用 showModalDialog（） 试试

赞成，
应该用模态窗口，现在FF3也已经支持了，
用透明层的办法虽好，但是TAB键仍然可以切换，
所以不是太保险。

#7

恩！

我下午的时候也考虑用showModalDialog

呵呵

和我想到一起去了

谢谢大家

结了

#1

是用js来实现的，，，，，，，，，，，，，

#2

自己去试试看

<!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" lang="zh-CN">

<head>
<title>点击弹出窗口层，并且背景变暗渐变</title>
<style>
body {font-size:12px;background:#9EC7E7}
img {border:0px}
#msgDiv {
    z-index:10001;
    width:500px;
    height:400px;
    background:white;
    border:#336699 1px solid;
    position:absolute;
    left:50%;
    top:20%;
    font-size:12px;
    margin-left:-225px;
    display: none;
}
#bgDiv {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    background-color: #777;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
    opacity: 0.6;
}
</style>
<script type="text/javascript"> 
function showDetail() {
//背景
  var bgObj=document.getElementById("bgDiv");
  bgObj.style.width = document.body.offsetWidth + "px";
  bgObj.style.height = screen.height + "px";

//定义窗口
  var msgObj=document.getElementById("msgDiv");
  msgObj.style.marginTop = -75 +  document.documentElement.scrollTop + "px";

//关闭
  document.getElementById("msgShut").onclick = function(){
  bgObj.style.display = msgObj.style.display = "none";
  }
  msgObj.style.display = bgObj.style.display = "block";
}
</script>
</head>

<body>

<div id="msgDiv">
<div id="msgShut">
关闭</div>
<div id="msgDetail">
</div>
</div>
<div id="bgDiv">
</div>
<p>　</p>
<p><a href="#" onClick="showDetail()">点这里</a></p>

</body>

</html>

#3


2楼的朋友是用DIV+CSS实现的 

但是我要求的是用HTML+JavaScript

实现

呵呵~

就是弹出的不是一个DIV

而是一个新的浏览器窗口

但还是很感谢你

欢迎大家继续

#4

用 showModalDialog（） 试试

#5



<input type="button" onclick="Report(800,600,800,600,'sample');return false;"/>

<!--参数说明，横纵坐标，长和宽，遮罩层的ID-->

<div id="sample" style="display:none; ">

<!--放置你要弹出的页面，可以用iframe实现-->

</div>



// JScript 文件


var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;


function gid(id) {

return document.getElementById?document.getElementById(id):null;

}



function Browser() {

var ua, s, i;

this.isIE = false;

this.isNS = false;

this.isOP = false;

this.isSF = false;

ua = navigator.userAgent.toLowerCase();

s = "opera";

if ((i = ua.indexOf(s)) >= 0) {

this.isOP = true;return;

}

s = "msie";

if ((i = ua.indexOf(s)) >= 0) {

this.isIE = true;return;

}

s = "netscape6/";

if ((i = ua.indexOf(s)) >= 0) {

this.isNS = true;return;

}

s = "gecko";

if ((i = ua.indexOf(s)) >= 0) {

this.isNS = true;return;

}

s = "safari";

if ((i = ua.indexOf(s)) >= 0) {

this.isSF = true;return;

}

}


function DialogLoc() {

var dde = document.documentElement;

if (window.innerWidth) {

var ww = window.innerWidth;

var wh = window.innerHeight;

var bgX = window.pageXOffset;

var bgY = window.pageYOffset;

} else {

var ww = dde.offsetWidth;

var wh = dde.offsetHeight;

var bgX = dde.scrollLeft;

var bgY = dde.scrollTop;

}

t_DiglogX = (bgX + ((ww - t_DiglogW)/2));

t_DiglogY = (bgY + ((wh - t_DiglogH)/2));

}


function DialogShow(showdata,ow,oh,w,h) {

var objDialog = document.getElementById("DialogMove");

if (!objDialog) objDialog = document.createElement("div");

t_DiglogW = ow;

t_DiglogH = oh;

DialogLoc();

objDialog.id = "DialogMove";

var oS = objDialog.style;

oS.display = "block";

oS.top = t_DiglogY + "px";

oS.left = t_DiglogX + "px";

oS.margin = "0px";

oS.padding = "0px";

oS.width = w + "px";

oS.height = h + "px";

oS.position = "absolute";

oS.zIndex = "5";

oS.background = "#FFF";

oS.border = "solid #DCEBFF 1px";

objDialog.innerHTML = showdata;

document.body.appendChild(objDialog);

}


function DialogHide() {

ScreenClean();

var objDialog = document.getElementById("DialogMove");

if (objDialog) objDialog.style.display = "none";

}


function ScreenConvert() {

var browser = new Browser();

var objScreen = gid("ScreenOver");

if (!objScreen) var objScreen = document.createElement("div");

var oS = objScreen.style;

objScreen.id = "ScreenOver";

oS.display = "block";

oS.top = oS.left = oS.margin = oS.padding = "0px";

//z-index

oS.width = "100%";

oS.height = "1400px";;

oS.position = "absolute";

oS.zIndex = "3";

if ((!browser.isSF) && (!browser.isOP)) {

oS.background = "#FDFDFD";

} else {

oS.background = "#F0F0F0";

}

oS.filter = "alpha(opacity=40)";

oS.opacity = 40/100;

oS.MozOpacity = 40/100;

document.body.appendChild(objScreen);

}


function ScreenClean() {

var objScreen = document.getElementById("ScreenOver");

if (objScreen) objScreen.style.display = "none";

}



function Report(width,height,width_align,height_align,div_id)

{

   //var PostData = "do=" + Type + "&reportid=" + ID;

   //PostRequest(window.location.protocol + "//" + window.location.host + "/AJAX_Comm.aspx", PostData);

   var showData = document.getElementById(div_id).innerHTML;

   //ScreenConvert();DialogShow("<div id=\"DialogLoading\">正在读取,请稍候...</div>",110,10,124,20);

   ScreenConvert();

   DialogShow(showData,width,height,width_align,height_align);


}

function display(){

ScreenClean();

DialogHide()

}

#6

引用 4 楼 wang_wenhui 的回复:
用 showModalDialog（） 试试

赞成，
应该用模态窗口，现在FF3也已经支持了，
用透明层的办法虽好，但是TAB键仍然可以切换，
所以不是太保险。

#7

恩！

我下午的时候也考虑用showModalDialog

呵呵

和我想到一起去了

谢谢大家

结了
标签：

相关文章