Javascript 仅当滚动条位于顶部时,模式弹出窗口才会显示在中心
我使用的是模式弹出窗口,无论滚动条是在顶部还是底部,它都不会显示在中间。我总是希望它被渲染在中心,这样用户就不需要滚动来查看模式弹出窗口。以下是我正在使用的代码: CSS: JavaScript:Javascript 仅当滚动条位于顶部时,模式弹出窗口才会显示在中心,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我使用的是模式弹出窗口,无论滚动条是在顶部还是底部,它都不会显示在中间。我总是希望它被渲染在中心,这样用户就不需要滚动来查看模式弹出窗口。以下是我正在使用的代码: CSS: JavaScript: //SETTING UP OUR POPUP //0 means disabled; 1 means enabled; var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ //loads
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$(document.body).on('click', '.flag_icons' ,function(e){
//$('.flag_icon').click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
HTML:
x
呈现的模式弹出窗口
使用以下选项代替顶部:0左侧:0:
#backgroundPopup{
display:none;
position:fixed;
height:100%;
width:100%;
top:50%;
left:50%;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
最高:50%;
左:50%
无论发生什么情况,都将元素保持在页面中心。选项1使用%
垂直对齐
选项2
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
html中的结束表单标记是什么?更改位置:修复了我的问题。请编写格式代码,使问题更易于阅读。另外一个改进是删除任何不相关的代码。
#backgroundPopup{
display:none;
position:fixed;
height:100%;
width:100%;
top:50%;
left:50%;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}