[jQuery对话框用户界面，单击标题时会关闭

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; }