我自己开始编写一个非常简单的jQuery Popup。
这是代码
<script type="text/javascript">
$(document).ready(function(){
$("#pop").click(function(){
openPopup();
});
$("#close").click(function(){
closePopup();
});
});
function openPopup(){
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position:'absolute'
});
$("#overlay_form").fadeIn(1000);
}
function closePopup(){
$("#overlay_form").fadeOut(500);
}
$(window).bind('resize',openPopup);
</script>
一切都很好。但问题在于此代码
$(window).bind('resize',openPopup);
此代码用于将弹出窗口保留在浏览器的中心。但是,即使我关闭弹出窗口,如果我调整浏览器大小,这个代码再次打开弹出窗口。
我需要在代码中的某个地方使用if条件!在哪里使用以及如何使用? 请给我一个解决方案!。
答案 0 :(得分:1)
从函数中删除.fadeIn()
并将其放在点击处理程序中。
$("#pop").click(function(){
$("#overlay_form").fadeIn(1000);
resizePop();
});
function resizePop(){
if(!$("#overlay_form").is(':visible')){
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position:'absolute'
});
}
$(window).bind('resize',resizePop);
答案 1 :(得分:1)
您正在寻找的解决方案非常简单 - 当您找到它时。 。 。
在文档就绪函数中添加一个在浏览器调整大小事件期间触发的函数;在该功能中重新对话:
$(document).ready(function () {
$(window).resize(function() {
$('#overlay_form').dialog('option', 'position', 'center');
});
});
顺便说一句,当您打开对话框时,无需指定顶部或左侧,因为默认位置是中心。
答案 2 :(得分:0)
首先不推荐使用bind
,使用jQuery 1.7中的.on()
,然后当弹出框淡出时,事件处理失败,因此限制调整大小一个函数的事件处理程序导致脚本中断。
$(window).on('resize',function() {
openPopup();
});
答案 3 :(得分:0)
if( $("#overlay_form").is(':visible') ) {
// it's showing, so recenter it
}
else {
// it's hidden, so you don't care
}
我建议您将重新定心代码与开头代码分开,以便根据具体情况更具体地调用它们。