我在 jQuery 中创建了一个简单的弹出窗口,除了 infoPopupLoadResize()
函数中的 on load 之外,几乎一切似乎都工作正常。我不确定为什么它在页面加载时不触发,但在调整大小时起作用。
infoPopupLoadResize()
函数的目的是计算弹出窗口的宽度和高度,然后应用负上边距和负左边距来居中位置。
这可能是时间问题吗?我尝试使用 setTimeout
调用函数 infoPopupOpen()
以确保弹出窗口已加载到页面上,以便在打开之前调用 infoPopupLoadResize()
弹出窗口,但这似乎也不起作用。
这是我工作的 JSFiddle: https://jsfiddle.net/pegues/x4qgkLez/
JavaScript:
jQuery(document).ready(function($){
$('.triggerpopup').on('click', function(e){
e.preventDefault();
infoPopupInit('info','Test<br/>Test<br/>Test');
});
});
/**
* Information Popup Initialize Function
*/
function infoPopupInit(type,message){
// Call Popup Struction
infoPopup(type,message);
// Call Popup Controls
infoPopupControls();
// Call Popup Load and Resize
infoPopupLoadResize();
// Call Popup Open
infoPopupOpen();
}
/**
* Information Popup Structure Function
*/
function infoPopup(type,message){
// HTML Structure
var popupHintMarkup =
'<div class="infopopupbackdrop"></div>' +
'<div class="infopopup ' + type + '">' +
'<div class="infopopup_inner">' +
'<a href="#" class="infopopupclose">x</a>' +
'<div class="">' +
message +
'<div class="clear"></div>' +
'</div>' +
'<div class="clear"></div>' +
'</div>' +
'<div class="clear"></div>' +
'</div>';
// Prepend to Body
$('body').prepend(popupHintMarkup);
}
/**
* Information Popup Controls Function
*/
function infoPopupControls(){
$('.infopopupbackdrop,.infopopupclose').on('click', function(e){
e.preventDefault();
infoPopupClose();
});
}
/**
* Information Popup Controls Function: Close
*/
function infoPopupClose(){
$('.infopopupbackdrop').delay(50).fadeOut(150);
$('.infopopup').fadeOut(150);
// Remove Popup after 300ms
var closePopup = setTimeout(function(){
$('.infopopupbackdrop,.infopopup').remove();
},300);
}
/**
* Information Popup Controls Function: Open
*/
function infoPopupOpen(){
$('.infopopup').delay(50).fadeIn(150);;
$('.infopopupbackdrop').fadeIn(150);
}
/**
* Information Popup Load/Resize Function
*/
function infoPopupLoadResize(){
// On Load and Resize
$(window).on('load resize', function(){
var _Width = $('.infopopup').width();
var _Height = $('.infopopup').height();
console.log('Width: ' + _Width + ' Height: ' + _Height);
$('.infopopup').css({ marginTop: -(_Height/2), marginLeft: -(_Width/2) });
});
}
HTML:
<a href="#" class="triggerpopup" style="margin: 15px;padding: 0 15px;display: block;float: left;height: 35px;color: #fff;font: 13px/35px Arial, Helvetica, Sans-serif;text-decoration: none;background-color: #b33;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;">Open Popup</a>
CSS:
/* Information Popup Backdrop */
div.infopopupbackdrop {
position: fixed;
top: 0;
left: 0;
z-index: 998;
display: none;
width: 100%;
height: 100%;
cursor: pointer;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.75);
}
/* Information Popup Content */
div.infopopup {
position: fixed;
top: 50%;
left: 50%;
z-index: 999;
display: none;
width: 100%;
max-width: 500px;
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
}
div.infopopup_inner {
position: relative;
padding: 25px;
border: 1px solid #d0d0d0;
background-color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
a.infopopupclose {
position: absolute;
top: 10px;
right: 10px;
display: block;
}
最佳答案
这是
$(window).on('load resize', function(){
窗口加载不久前发生,因为窗口不是您的弹出窗口,而是浏览器窗口。
您可以通过在打开弹出窗口时始终执行此函数来解决此问题
/**
* Information Popup Load/Resize Function
*/
function infoPopupLoadResize(){
var _Width = $('.infopopup').width();
var _Height = $('.infopopup').height();
console.log('Width: ' + _Width + ' Height: ' + _Height);
$('.infopopup').css({ marginTop: -(_Height/2), marginLeft: -(_Width/2)});
}
和
/**
* Information Popup Initialize Function
*/
function infoPopupInit(type,message){
// Call Popup Struction
infoPopup(type,message);
// Call Popup Controls
infoPopupControls();
// Call Popup Load and Resize
infoPopupLoadResize();
$(window).on('resize', infoPopupLoadResize);
// Call Popup Open
infoPopupOpen();
}
关于javascript - 如何让 JS 弹出窗口定位在 Load 上?关于调整大小作品,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34372841/