我已经开始了解 jQuery,但我认为我仍然缺少一些基础知识。我有一组复杂的对话框弹出窗口(如下所示),但我不知道如何将它们合并到一个“类”中。
HTML:
<div id="FirstDialogFrame"
title="First"
data-button="Alert First"
data-alert="FirstAlert">
</div>
<div id="SecondDialogFrame"
title="Second"
data-button="Alert First"
data-alert="SecondAlert" >
</div>
<button id="PopFirst">First</button>
<button id="SecondFirst">Second</button>
JavaScript:
$("#FirstDialogFrame").dialog({
autoOpen: false,
resizable: true,
height: 340,
width: 340,
modal: true,
buttons: {
"Alert": function() {
alert($(this).attr("data-alert"));
$(this).dialog("close");
},
Close: function() {
$(this).dialog("close");
}
}
});
$("#SecondDialogFrame").dialog({
autoOpen: false,
resizable: true,
height: 340,
width: 340,
modal: true,
buttons: {
"Alert": function() {
alert($(this).attr("data-alert"));
$(this).dialog("close");
},
Close: function() {
$(this).dialog("close");
}
}
});
$("#PopFirst").click(function() {
$("#FirstDialogFrame").dialog("open");
});
$("#SecondFirst").click(function() {
$("#SecondDialogFrame").dialog("open");
});
fiddle :
http://jsfiddle.net/tzerb/BYKqM/
感谢任何反馈。
TIA。
最佳答案
HTML
<div id="FirstDialogFrame" class="popup"
title="First"
data-button="Alert First"
data-alert="FirstAlert">
</div>
<div id="SecondDialogFrame" class="popup"
title="Second"
data-button="Alert First"
data-alert="SecondAlert" >
</div>
<button id="PopFirst">First</button>
<button id="SecondFirst">Second</button>
Javascript
$(".popup").dialog({
autoOpen: false,
resizable: true,
height: 340,
width: 340,
modal: true,
buttons: {
"Alert": function() {
alert($(this).attr("data-alert"));
$(this).dialog("close");
},
Close: function() {
$(this).dialog("close");
}
}
});
$("#PopFirst").click(function() {
$("#FirstDialogFrame").dialog("open");
});
$("#SecondFirst").click(function() {
$("#SecondDialogFrame").dialog("open");
});
关于jquery - 合并对话框代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10435936/