0

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

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

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

4

2 回答 2

0

ID 必须是唯一的。

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

于 2013-04-30T11:33:06.437 回答
0

检查这个 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 元素使用类。

于 2013-04-30T11:43:04.057 回答