Question

我正在使用jquery模式框，它在页面上只有一个链接正常工作但在创建了不同的URL以打开模式框的不同实例后，它就停止了工作。

我需要能够创建不同的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>

很高兴能得到这方面的帮助。

Answer 1

<强> IDs must be unique.

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

Answer 2

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元素的类，如我的例子所示。

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

2 个答案: