Javascript 在显示器中央打开一个弹出窗口_Javascript_Jquery_Html_Popup

Javascript 在显示器中央打开一个弹出窗口

javascript jquery html

Javascript 在显示器中央打开一个弹出窗口,javascript,jquery,html,popup,Javascript,Jquery,Html,Popup,我试图打开显示器中央的弹出窗口。据我所知，每台台式机或笔记本电脑的屏幕大小会有所不同。这就是我寻找某种方法的原因，这样每当我的代码试图打开一个弹出窗口时，它都应该在浏览器的中心打开下面是我的代码- <html> <head> <style> * { font-family: Trebuchet MS; } #containerdiv {width:90%; height: 90%; display: none; position: fixed;margi

我试图打开显示器中央的弹出窗口。据我所知，每台台式机或笔记本电脑的屏幕大小会有所不同。这就是我寻找某种方法的原因，这样每当我的代码试图打开一个弹出窗口时，它都应该在浏览器的中心打开

下面是我的代码-

<html>

<head>
<style>

* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6;  position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC;  }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover {  cursor: pointer; background: #E5E5E5 }

#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover {  cursor: pointer; background: #E5E5E5 }

</style>

<script type="text/javascript"  src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script>

function open(url) {
    $('#blockdiv').fadeIn();
    $('#iframe').attr('src', url);
    $('#containerdiv').fadeIn();   
}

function close() {  
    $('#blockdiv').fadeOut();
    $('#containerdiv').fadeOut();  
}

$(document).ready(function() {
  $('ul').css({width: $('#containerdiv').width()-20,height:    $('#containerdiv').height()-90})

     $('#close').click( function() { close() })
     $('#apply').click( function() { open('http://www.google.com/') })

});

</script>
</head>
<body>
<span id="apply">ApplyOnline</span>
<div id="blockdiv"></div>
<div id="containerdiv">
    <iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
    <span id="close">Close</span>
</div>
</body>
</html>


*{字体系列：投石机MS；}
#containerdiv{宽度：90%；高度：90%；显示：无；位置：固定；页边距顶部：5%；页边距左侧：5%；背景：FFF；边框：1px实心#666；边框：1px实心#555；方框阴影：2px 2px 40px#222；z索引：999999；}
/*#containerdiv iframe{显示：无；宽度：100%；高度：100%；位置：绝对；边框：无；}*/
#blockdiv{背景：#000；不透明度：0.6；位置：固定；宽度：100%；高度：100%；顶部：0；左侧：0；显示：无；}
ul{填充：10px；背景：#EEE；位置：绝对；高度：200px；溢出：滚动；}
ul li{颜色：#222；填充：10px；字体大小：22px；边框底部：1px实心#CCC；}
h3{字体大小：26px；填充：18px；边框底部：1px实心#CCC；}
#关闭{顶部：13px；位置：绝对；右侧：13px；填充：10px；背景：#EEE；边框：1px实心#CCC；}
#关闭：悬停{光标：指针；背景：#e5}
#应用{顶部：13px；位置：绝对；左侧：13px；填充：10px；背景：#EEE；边框：1px实心#CCC；}
#应用：悬停{光标：指针；背景：#e5}
函数打开（url）{
$（'#blockdiv'）.fadeIn（）；
$（'iframe'）.attr（'src'，url）；
$（#containerdiv'）.fadeIn（）；
}
函数close（）{
$（'#blockdiv'）.fadeOut（）；
$（“#containerdiv”）.fadeOut（）；
}
$（文档）.ready（函数（）{
$（'ul'）.css（{宽度：$（'containerdiv'）.width（）-20，高度：$（'containerdiv'）.height（）-90}）
$（'#close'）。单击（函数（）{close（）}）
$（'#apply'）。单击（函数（）{open（'http://www.google.com/') })
});
ApplyOnline
接近

但不知怎的，上面的代码并没有在显示器中央打开。有人能帮我吗？我需要在上面的代码中做哪些更改，以使其始终打开圆圈中心的弹出窗口。

您可以在css中将弹出窗口居中，如

这是唯一的css方法，使它成为中心，所以不需要js将其中心化

#containerdiv {
    width:90%;
    height: 90%;
    display: none;
    position: fixed;
    left:50%;
    top:50%;
    margin:-45% 0 0 -45%;
    background:#FFF;
    border: 1px solid #666;
    border: 1px solid #555;
    box-shadow: 2px 2px 40px #222;
    z-index: 999999;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

它在浏览器窗口中居中显示

如果要根据客户端显示器的屏幕分辨率将其居中，可以使用：

var centerDiv=function(){
    var popUpHeight=$('#containerdiv').height();
    var popUpWidth=$('#containerdiv').width();
    var yPos=(window.screen.availHeight/2)-(popUpHeight/2)-window.screenY-(window.outerHeight-window.innerHeight);
    var xPos=(window.screen.availWidth/2)-(popUpWidth/2)-window.screenX-(window.outerWidth-window.innerWidth);
    $('#containerdiv').css({position:"absolute",top: yPos+"px",left: xPos+"px"});
}
window.onload=centerDiv();
var lastX = window.screenX;
var lastY = window.screenY;
var lastHeight = window.innerHeight;
var lastWidth = window.innerWidth;
setInterval(function(){
  if(lastX != window.screenX || lastY != window.screenY || lastHeight != window.outerHeight || lastWidth != window.outerWidth){
    centerDiv();
  }

  oldX = window.screenX;
  oldY = window.screenY;
}, 33);

我应该在哪里添加此代码？如果我添加这段代码，是否需要删除任何内容？您可以将其附加到document ready事件中。但这段代码有一个问题。您还需要找到浏览器视图端口与屏幕边缘的距离，并减去这些距离。给我一点时间，我会看看我是否能把我的答案也考虑进去。我已经更改了代码。这并不完美，但它做得相当不错。我注意到，当chrome调试器启动时，它的行为很有趣。我不知道是否有办法提高这一点，但目前效果相当不错。它还将以每秒30帧的速率更新长方体上的位置。通过在屏幕周围移动窗口来尝试。让我知道这是否有帮助。谢谢编辑：我忘了提到，要做到这一点，请将宽度和高度设置为显式像素值，并删除边距。