Question

我只是jQuery和UI的新手。请给我以下代码的建议。我想通过单击按钮在同一页面上显示jquery对话框窗口。需要你的帮助。谢谢，肖。

HTML ：

<button id="opener_1">Enlarge</button>
<div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large1.jpg" style="display:none" />
</div>

 <button id="opener_2">Enlarge</button>
 <div id="dialog_2" title="Dialog Title">Enlarge
  <img class="large_2" src="./large2.jpg" style="display:none" />
</div>

<button id="opener_3">Enlarge</button>
<div id="dialog_3" title="Dialog Title">Enlarge
  <img class="large_3" src="./large3.jpg" style="display:none" />
</div>

 <button id="opener_1">Enlarge</button>
 <div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large1.jpg" style="display:none" />
  </div>

 <button id="opener_1">Enlarge</button>
 <div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large2.jpg" style="display:none" />
</div>

<button id="opener_1">Enlarge</button>
<div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large3.jpg" style="display:none" />
</div>

使用Javascript：

$(function(){
    for (var i = 0; i <= button.length; i++) {
        $(function () {
            $('#dialog_' + [i]).dialog({
                autoOpen: false,
                modal: false,
                width: "auto",
                height: "auto"
            })
        });
        $(function(){
            $('#opener_' + [i]).click(function () {
                $('.large_' + [i]).dialog('open');
            });
        });
}

Answer 1

首先，ID属性必须是唯一的。

给出以下HTML

<button id="opener_1">Enlarge</button>
<div class="dialog" title="Dialog Title">Enlarge 1
  <img class="large_1" src="./large1.jpg" style="display:none" />
</div>

 <button id="opener_2">Enlarge</button>
 <div class="dialog" title="Dialog Title">Enlarge 2
  <img class="large_2" src="./large2.jpg" style="display:none" />
</div>

 <button id="opener_3">Enlarge</button>
 <div class="dialog" title="Dialog Title">Enlarge 3
  <img class="large_3" src="./large3.jpg" style="display:none" />
</div>

您可以使用此Javascript

$(function(){
    $('.dialog').dialog({
        autoOpen: false,
        modal: false,
        width: "auto",
        height: "auto"
   });

    $('button').each(function(i) {
        var el = $(this);
        el.click(function () {
            $('.dialog').dialog('close'); // Close all open dialogues
            $('.dialog').eq(i).dialog('open'); // Open relevant dialogue
        });
    });
});

工作示例http://fiddle.jshell.net/q2cU2/1/

显示jQuery UI对话框，多个窗口动态单击按钮

1 个答案: