Question

我有一个滚动的网页，在代码中我有一个脚本，当选择了页面上的所有项目时，它会加载一个Jquery mopdal弹出窗口。这很好用。但是，如果用户继续向上或向下滚动，我需要将弹出窗口固定在屏幕中央。加载弹出窗口的脚本是：

$('#complete').show();
$(document).ready(function(){
$('#backbutton2').hide();
var $scrollingDiv = $("#complete");
$("#complete").attr('title','Audit complete').dialog({
  modal: true,
  autoOpen: true,
  width : 400,
  height: 220,
    buttons: {
        'Finish': function () {
        $(this).dialog("Finish");
        window.location.href = "close_room.php?UniqueID=<?php print $_SESSION['UniqueID'] ;?>"; 
         }
    }
}); 
$(window).scroll(function(){            
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, "slow" );           
});
});

按原样，当弹出窗口打开时，弹出窗口将跟随滚动，但弹出窗口的顶部保持固定，而当我向下滚动时窗口自身长度增长。任何人都可以看到我出错的地方。

非常感谢你的时间。

Answer 1

打开弹出窗口时，将css overflow属性更改为隐藏状态

$('body').css('overflow','hidden')

关闭时，请恢复正常

$('body').css('overflow','auto')

Answer 2

我使用以下代码解决了这个问题：

$('#complete').show();
$(document).ready(function() { 
  $('#backbutton2').hide(); 
  oDetail  = $("#complete").attr('title','Audit complete').dialog({  
    autoOpen: true,  
    width: 400,  
    height: 220,  
    position: 'center',  
    resizable: 'false',  
    draggable: true,
    buttons: {
        'Finish': function () {
           $(this).dialog("Finish");
           window.location.href = "close_room.php?UniqueID=<?php print $_SESSION['UniqueID'] ;?>"; 
         }
    }
   }); 
$(window).scroll(function () {  
  oDetail .dialog("option","position","center");  
}); 
});

我希望这对其他人有所帮助。

滚动UP DATED时修复了jquery模态弹出窗口

2 个答案: