我只是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');
});
});
}
首先,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/