index.php中的多个jquery对话框 - Multiple jquery dialogs in index.php

一般的想法是制作一个看起来像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>

我还有两个分开的php文件，它们被iclude到我的索引页面中，它们包含。。。

第一个：

<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_module_dialog_1和#rl_module_dialog_2

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

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

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

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

编辑：

为了不为每个图标放置大量的点击处理程序，您可以这样做：

<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>

请参阅图标div现在有data-dialog=""，即指定单击图标时应打开的对话框的ID。

所有对话框的单击处理程序：

$(".opener").click(function () {            
     $("#" + $(this).data("dialog")).dialog("open");
});

$(this).data("dialog")取data-dialog值。演示：http://jsfiddle.net/X6qhH/3/

对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>

这两个对话框都有相同的id。使第二个对话框具有id="rl_module_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应该像这个

rl_module_dialog_1

rl_module_dialog_2

最短代码

$JQ_('[id^="rl_module_dialog"]').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.

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

也就是说，我已经重新编写了您的代码，以便使用jQueryUI对话框的多个实例。

FIDDLE演示

var $JQ_ = jQuery.noConflict();
$JQ_('.rl_module_dialog').hide();
$JQ_('.opener').each( function() {
    $JQ_.data(this, 'dialog',
           $JQ_(this).prev('.rl_module_dialog').dialog({
               autoOpen: false,
               width: 'auto',
               resizable: false,
               show: {
                   effect: 'fade',
                   duration: 250
               },
               hide: {
                   effect: 'fade',
                   duration: 250
               }
           })
     );
}).click( function() {
    $JQ_.data(this, 'dialog').dialog('open');
});

希望这对你有用。