具有不同的链接，可在同一页面上打开多个jquery模式框实例
具有不同的链接，可在同一页面上打开多个jquery模式框实例
提问于 2013-04-30 19:26:00
我正在使用jquery模式框，它在页面上只有一个链接就可以很好地工作，但在创建了不同的url来打开模式框的不同实例后，它停止了工作。
我需要能够创建不同的网址，应该能够打开它自己的jquery模式框的实例，它独特的内容是从数据库中提取，也能够启动这些模式框在同一页上没有jquery冲突。
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="css/js_css/jquery.ui.all.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.mouse.js"></script>
<script src="js/ui/jquery.ui.draggable.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.resizable.js"></script>
<script src="js/ui/jquery.ui.button.js"></script>
<script src="js/ui/jquery.ui.dialog.js"></script>
<script src="js/ui/jquery.ui.effect.js"></script>
<script src="js/ui/jquery.ui.effect-blind.js"></script>
<script src="js/ui/jquery.ui.effect-explode.js"></script>
<link rel="stylesheet" href="css/js_css/demos.css">
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the dialog for displaying information.</p>
</div>
<button id="opener">Open Dialog 1</button>
<br><br>
<button id="opener">Open Dialog 2</button>
<br><br>
<button id="opener">Open Dialog 3</button>
<br><br>
<a href="" id="opener">Open dialog 4 via this link</a>
<br><br>
<a href="" id="opener">Open dialog 5 via this link</a>
</body>
</html>会很高兴在这方面得到帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-30 19:33:06
将id="opener"的实例更改为class="opener"，并将$("#opener").click(...)更改为$(".opener").click(...)。
Stack Overflow用户
发布于 2013-04-30 19:43:04
Check this jsFiddle
HTML代码
<div class='my-container'>
<button class="opener">Open Dialog 1</button>
<div class="mydialog" title="Basic dialog 1">
<p>My Dialog 1: Test data.</p>
</div>
<br><br>
<div class='my-container'>
<button class="opener">Open Dialog 1</button>
<div class="mydialog" title="Basic dialog 2">
<p>My Dialog 2: Test information.</p>
</div>jQuery代码
$('.opener').on('click',function(){
var mydivdialog = $(this).parent().children('.mydialog').first();
console.log(mydivdialog);
mydivdialog.dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
mydivdialog.dialog("open");
});注意:正如其他人所说，ID必须是唯一的。对多个html元素使用类，如我的示例所示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16298755
复制相关文章
相似问题
腾讯云开发者
