Question

如何为此对话框设置'autoOpen'和'open'。请帮忙！

<body>
<img class="image" src="css/images/0101-s.png">
<img src="css/images/0101.png" style="display: none;"class="dialog">

<img class="image" src="css/images/0102-s.png">
<img src="css/images/0102.png" style="display: none;"class="dialog">

<script>
$('.image').click  (function(){
        $(this).next('.dialog').dialog({ show: 'slide', minWidth: 400 });
    });
</script>

Answer 1

每次单击图像时，您都尝试初始化对话框。您应该在初始化后调用$('.dialog').dialog("open")以打开对话框。

DEMO

尝试以下代码，

//initialize the dialogs
$('.image').each(function(index) {
    var dialogID = 'dlg-' + index;
    $(this).next('.dialog').dialog({
        show: 'slide',
        minWidth: 400,
        create: function(event, ui) { 
            $(this).addClass(dialogID);
        },
        autoOpen: false
    });

    $(this).data('dlgID', dialogID);
});

$('.image').click(function() {
    var dialogID = $(this).data('dlgID');
    $('.' + dialogID ).dialog("open");
});

您的代码不起作用，因为对话框不再位于.next()的{{1}}中。 jQuery对话框小部件将对话框附加到body标记，因此代码中的.image为空。见下面的快照，

在对话初始化之前，

enter image description here

对话初始化后，

enter image description here

Answer 2

你应该做

$('.image').click  (function(){
    $(this).next('.dialog').dialog({ show: 'slide', minWidth: 400, autoOpen: true });
});

以这种方式单击图像时打开对话框。如果需要，可以定义一个打开的函数，在对话框打开时执行某些操作。

$('.image').click(function() {
    $(this).next('.dialog').dialog({
        show: 'slide',
        minWidth: 400,
        autoOpen: true,
        open: function(){
            alert('hi');
        }

    });
});

Answer 3

不要浪费资源在每次点击时创建对话框。这样做：

$('.dialog').dialog({
    autoOpen: false,
    show: 'slide',
    minWidth: 400
});
$('.image').click(function() {
    $('.dialog').eq($(this).index('.image')).dialog('open');
})

<强> jsFiddle example

对话框仅打开一次

3 个答案: