index.php中的多个jquery对话框

一般的想法是创建一个看起来像windows环境的站点，因此我添加了两个图标，例如，当有人单击它们时，会出现两个不同的对话框

在我的站点的索引页面中，我添加了以下标题标签：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- JQUERY DIALOG SCRIPT -->
<script>
    var $JQ_ = jQuery.noConflict();
    $JQ_(function () {
        $JQ_("#rl_module_dialog").dialog({
            autoOpen: false,
            width: 'auto',
            resizable: false,
            show: {
                effect: "fade",
                duration: 250
            },
            hide: {
                effect: "fade",
                duration: 250
            }
        });
        $JQ_("#opener").click(function () {
            $JQ_("#rl_module_dialog").dialog("open");
        });
    });
</script>

var$JQ_=jQuery.noConflict（）；
$JQ_（函数（）{
$JQ_（“#rl_模块_对话框”）。对话框({
自动打开：错误，
宽度：“自动”，
可调整大小：false，
展示：{
效果：“褪色”，
持续时间：250
},
隐藏：{
效果：“褪色”，
持续时间：250
}
});
$JQ（“#开启器”）。单击（函数（）{
$JQ_（“#rl#u模块_对话框”）。对话框（“打开”）；
});
});

我还有两个单独的php文件，它们被包含在我的索引页中，它们包含以下内容

第一名：

<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something.php'; ?></div>
<div class="nm_icon" id="opener"><div class="icon">&nbsp;</div></div>

秒

<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something_else.php'; ?></div>
<div class="vath_icon" id="opener"><div class="icon">&nbsp;</div></div>

---

如果我不包括第二个，对话框就可以正常工作。如果我把它们都放在一起，没有一个起作用！有没有办法将我的jquery对话框脚本用于同一页面中的多个对话框？

这两个对话框都具有相同的id。使第二个对话框具有

id=“rl\u module\u dialog2”

并对其进行初始化

$JQ_("#rl_module_dialog2").dialog({
    autoOpen: false,
    width: 'auto',
    resizable: false,
    show: {
        effect: "fade",
        duration: 250
    },
    hide: {
        effect: "fade",
        duration: 250
    }
});

把你的开瓶器按钮打开，就像

$JQ_("#opener").click(function(){
    $JQ_("#rl_module_dialog").dialog("open");
    $JQ_("#rl_module_dialog2").dialog("open");
});

---

首先。不要在同一页上使用多个ID

也就是说，我重新编写了您的代码，以处理jQueryUI对话框的多个实例

---

希望这对您有用。

为div使用不同的id，然后它可能会被修复

第一:

<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something.php'; ?></div>
<div class="nm_icon" id="opener"><div class="icon">&nbsp;</div></div>

第二：

<div id="rl_module_dialog_two" class="rl_module_dialog" title=""><?php include '**/**/something_else.php'; ?></div>
<div class="vath_icon" id="opener"><div class="icon">&nbsp;</div></div>



<script>
    var $JQ_ = jQuery.noConflict();
    $JQ_(function () {
        $JQ_("#rl_module_dialog").dialog({
            autoOpen: false,
            width: 'auto',
            resizable: false,
            show: {
                effect: "fade",
                duration: 250
            },
            hide: {
                effect: "fade",
                duration: 250
            }
        });
        $JQ_("#opener").click(function () {
            $JQ_("#rl_module_dialog_two").dialog("open");
        });
    });
</script>

var$JQ_=jQuery.noConflict（）；
$JQ_（函数（）{
$JQ_（“#rl_模块_对话框”）。对话框({
自动打开：错误，
宽度：“自动”，
可调整大小：false，
展示：{
效果：“褪色”，
持续时间：250
},
隐藏：{
效果：“褪色”，
持续时间：250
}
});
$JQ（“#开启器”）。单击（函数（）{
$JQ_（“#rl_模块_对话框_二”）。对话框（“打开”）；
});
});

请记住，ID在页面上必须是唯一的。

因此，您应该简单地为对话框指定不同的ID。类似于

#rl_模块_对话框_1

和

#rl#u模块_对话框_2

稍后，您可以初始化这些对话框，如：

$JQ_("#rl_module_dialog_1,#rl_module_dialog_2").dialog({...});

当然，要打开对话框，您需要指定相应的id：

$JQ_("#rl_module_dialog_1").dialog("open");

编辑：

<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something.php'; ?></div>
<div class="nm_icon" id="opener"><div class="icon">&nbsp;</div></div>

为了避免为每个图标放置大量的单击处理程序，可以执行以下操作：

<div class="rl_module_dialog" id="dialog1" title="">Dialog 1</div>
<div class="nm_icon opener" data-dialog="dialog1"><div class="icon">Open 1</div></div>
<div class="rl_module_dialog" id="dialog2" title="">Dialog 2</div>
<div class="nm_icon opener" data-dialog="dialog2"><div class="icon">Open 2</div></div>

$（this）.data（“dialog”）

获取

数据dialog

值。

---

演示：

对话框id应该是这样的

rl\u模块对话框\u 1

rl\u模块对话框\u 2

最短代码

$JQ_('[id^="rl_module_dialog"]').dialog({...});

要打开，您可以使用

$JQ_("#rl_module_dialog_1").dialog("open");

^

---

我按照你说的做了，我的朋友，它只适用于第一个图标。另外，当我点击它时，它会同时打开两个对话框！！！你离得太近了，有什么修正吗？谢谢你的时间…检查我的编辑。这个解决方案完全基于您在问题上给出的html。我现在正在处理JSFIDLE，但不处理我的案例。。。我检查了代码“一个字符一个字符”，没有错误！！！如果它起作用，我会通知你…试着把你的代码当作一把小提琴来张贴。可能是您的html导致了问题。请再次尝试在JSFIDLE上发布您的代码，或显示您的站点。我很乐意提供帮助，但如果没有看到您的代码，我将无法提供帮助。：）它的工作，但我需要一些更“紧凑”。。。如果我必须一个接一个地添加所有这些对话框，我的代码看起来就像一本圣经！！！没有办法在使用

的同时使用
或其他什么？PS：我对jQuery完全是新手。谢谢你的时间！！！在哪种情况下逐个添加？你想什么时候开门？还是创建对话框？您始终可以使用公共类而不是ID。类似于
$JQ_（“.rl_module_dialog”）.dialog（{…}）这将使用class
rl\u module\u dialog
初始化所有对话框我正在谈论的这一部分<代码>$JQ（“#rl#u模块_对话框_1”）。对话框（“打开”）。嗯，不确定为什么需要一次单击打开所有对话框，但您应该可以使用类：
$JQ(“.rl_模块_对话框”）。dialog（“打开”）我想我打错了。。。我希望每个对话框都单独打开，但如果我能使它更紧凑的话，它会进入代码中。它正在工作。。。但是没有办法在开放部分执行类似的操作，而不必逐个编写这些对话框？
$JQ_("#rl_module_dialog_1").dialog("open");

Description: Selects elements that have the specified attribute with 
a value beginning exactly with a given string.