Question

我正在使用以下代码访问我的某个网站。我知道有很多方法可以创建一个对话框。但由于某种原因，我需要遵循这些结构。

//On click trigger a popup box 
$('#terms').click(function(e){
    popupBox(e);
});
//Create a Popup Box 
function popupBox(e){            
    e.preventDefault();
    $('body').width($('body').width());
    $('body').css('overflow', 'hidden');
    $('<div id="popupbox" title="Terms and Conditions"><!-- popupbox - Edit by Yesh  --></div>').appendTo('body')
    .html('<div><h1>Lorem Ipsum Title</h1></div><div><p>Lorem ipsum dolar sit amet </p></div><div><small>Read it before accept</small></div>')
    .dialog({
        modal: true, title: 'Terms and Conditions', zIndex: 9999, autoOpen: true,
        width: '60%', resizable: false,
        close: function (e) {
            e.preventDefault();
            $(this).remove();
            $('body').css('overflow', 'auto');
        },
    });
}

问题是当我点击标题时。它被隐藏（未关闭）。那么，如何修复呢？

我的JSFIDDLE工作正常。

Answer 1

当无法重现您所面临的问题时，几乎无法回答。尝试缩小问题范围：

您使用的浏览器是什么？所有浏览器的行为是否一致？
如果问题没有在jsfiddle中重现，可能问题不在于您在jsfiddle中放置的代码。尝试从页面中提供更多代码，直到问题出现为止 - 然后尽可能多地删除以隔离错误。

简而言之，请向我们展示更多代码。

Answer 2

问题与垂直滚动有关。

打开对话框时，您可能会在页面上向下滚动。然后，单击对话框的标题栏以将其拖动时，对话框将跳至页面下方，通常从视图中隐藏。使其关闭的唯一方法是按Esc键。您的JSFiddle没有显示问题，因为它的垂直高度不足以进行滚动。

Here's a modified version of your JSFiddle，并添加了垂直空间以说明问题。

如this post中所述，解决方案是将对话框的样式从position: absolute更改为position: fixed：

.ui-dialog { position: fixed; }

Here's another JSFiddle，已解决问题。

单击标题时，jQuery对话框UI将关闭

2 个答案: