首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >具有不同的链接,可在同一页面上打开多个jquery模式框实例

具有不同的链接,可在同一页面上打开多个jquery模式框实例
EN

Stack Overflow用户
提问于 2013-04-30 19:26:00
回答 2查看 3.1K关注 0票数 0

我正在使用jquery模式框,它在页面上只有一个链接就可以很好地工作,但在创建了不同的url来打开模式框的不同实例后,它停止了工作。

我需要能够创建不同的网址,应该能够打开它自己的jquery模式框的实例,它独特的内容是从数据库中提取,也能够启动这些模式框在同一页上没有jquery冲突。

代码

代码语言:javascript
运行
复制
<!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>

会很高兴在这方面得到帮助。

EN

Stack Overflow用户

回答已采纳

发布于 2013-04-30 19:33:06

id="opener"的实例更改为class="opener",并将$("#opener").click(...)更改为$(".opener").click(...)

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16298755

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档