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

我使用的是jquery模式框，它在页面上只有一个链接的情况下运行良好，但是在创建不同的url以打开模式框的不同实例后，它停止了工作

我需要能够创建不同的url，该url应该能够打开它自己的jquery模式框实例，从数据库中获取唯一的内容，并且能够在同一页面上启动这些模式框，而不会与jquery冲突

代码

jQueryUI对话框-动画
$（函数（）{
$（“#对话框”）。对话框({
自动打开：错误，
展示：{
效果：“盲”，
持续时间：1000
},
隐藏：{
效果：“爆炸”，
持续时间：1000
}
});
$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
});
这是用于显示信息的对话框

打开对话框1



打开对话框2



打开对话框3

很高兴能得到帮助。

将

id=“opener”

的实例更改为

class=“opener”

，并将

$（“#opener”）更改为
$（“.opener”）。单击（…）
。

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>

$('.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元素使用类，如我的示例所示。
不要使用重复的id
$('.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");
});