Question

在我的页面（SharePoint 2010应用程序页面）中，我定义了一个简单的对话框div：

<div id='corrDlg'>
   <canvas id="corrCanvas" width="250px" height="50px" style="background-color: White; border-color: Black;" ></canvas>
</div>

我用以下JS代码初始化：

$('#corrDlg').hide();
$('#corrDlg').dialog( { autoOpen: false, modal : true, zIndex : 3, title: 'Correction Dialog' } ).hide();
$('#corrDlg').touch({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: true, scale: false });
$('.ui-dialog-titlebar').click(function () { $('#corrDlg').dialog('close'); });
$('.s4-rp').hide();

然后在JS按钮单击处理程序中显示模态对话框：

    $('#corrDlg').dialog("open", "position", "center");

到目前为止，一切都按预期运行：显示模态对话框。

然后我点击对话框标题栏并移动窗口（同时单击鼠标左键）。 只要我松开鼠标按钮，对话窗口就会关闭！

我无法通过调试jquery-ui.js找出我缺少哪些配置选项（或无意中添加）会产生这种不正确的行为。

我正在使用以下JS和CSS文件：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js"></script>  
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.js"></script>

上述行为与IE9和Chrome 16（及早期版本）相同。

Answer 1

除非我错误地阅读你的剧本，否则它会按照你的要求去做。

$（'。ui-dialog-titlebar'）。click（function（）{$（'＃corrDlg'）。dialog（'close'）; }）;

如果单击标题栏，将关闭对话框。由于拖动时按住了鼠标按钮，因此单击尚未完成。当您松开鼠标按钮时，只需单击一下，对话框就会关闭。

Answer 2

我会稍微分解一下，以便更容易测试。

此处还有一些文档可供参考。 http://jqueryui.com/demos/dialog/#option-draggable
    注意到他们是一个“可拖动”的选择。我没有测试任何这个，但希望它有所帮助。

$(document).ready(function(){
    $('#corrD1g').hide();
    $('.s4-rp').hide();  // Not sure what this does

    initialize_dialog();

    // Open Dialog Box a
    // selector = whatever your js button element is. 
    $('selector').live('click', function(){
        open_dialog_box
    });

    $('.ui-dialog-titlebar').live('click', function(){
        close_dialog_box
    });
});

function open_dialog_box() {
  $('#corrDlg').dialog("open", "position", "center");
}

function close_dialog_box() {
   $('#corrDlg').dialog('close');
}


function initialize_dialog() {
      $('#corrDlg').dialog({ 
                 autoOpen: false,
                 draggable: true, 
                 modal : true, 
                 zIndex : 3, 
                 title: 'Correction Dialog' 
      }

      $('#corrDlg').touch({ 
                    animate: false, 
                    sticky: false, 
                    dragx: true, 
                    dragy: true, 
                    rotate: false, 
                    resort: true, 
                    scale: false 
       });
}

拖动操作后，JQuery UI对话框消失

2 个答案: