单个页面上的多个 JQuery UI 对话框答案

【问题标题】：Multiple JQuery UI Dialog's on a single page单个页面上的多个 JQuery UI 对话框
【发布时间】：2013-08-07 03:08:42
【问题描述】：

在单个页面上，我希望使用 JQuery UI 的对话框来显示一堆不同的对话框，以便用户可以确认他们已经阅读了特定的屏幕消息以及显示一些其他内容。

我有一个服务器端 PHP foreach()，它生成消息并将每个消息放在 <div class="mod_message_short"> 内，其中包含许多用于布局/格式化的子 div，包括 <div class="mod_message_modal">，其中包含相关对话框的内容到那个特定的消息。

有没有一种方法可以在所有 .mod_message_modal 元素上声明 autoOpen:false 而不必单独声明它们（使用唯一的 id 而不是封装所有元素的类）？

以下是我目前得到的：

<script type="text/javascript">
$(function(){
    $('.mod_message_modal').dialog({
        autoOpen:false
    });

    $('.mod_message_readmore').click(function(e){
        $(".mod_message_short[data-messageid='" + $(this).parents('.mod_message_short').data('messageid') + "']").find('.mod_message_modal').dialog("open");
        e.preventDefault();
    });
});
</script>

不幸的是，这不起作用，因为 .dialog() 会从 DOM 中删除所有元素，所以当我去尝试找到它们以在鼠标单击事件上单独打开它们时，我做不到。

我希望解决方案是单独声明这些，但我认为这会生成一堆可能不必要的 javascript。

这似乎与here 发布的问题类似，但对我的特定问题没有有用的答案。

有什么想法吗？谢谢！

【问题讨论】：

标签： jquery jquery-ui dialog modal-dialog

【解决方案1】：

经过一番折腾，我设法想出了一个比在 PHP 的 foreach 循环中编写一些 javascript 更优雅的解决方案。

这仍然会迭代每个我想由他们的类用作对话框的 div，但会根据它们的 id 属性将它们设置为对话框。这允许它们被单独调用，再次基于它们的 id。 HTML5 data-* 属性的使用是我解决方案的关键。

我的视图类中的 HTML 和 PHP：

<?php foreach($this->messages as $message): ?>
    <div class="mod_message_short" data-messageid="<?php echo $message->id;?>">
            <!-- Display shortext here -->
        <div class="mod_message_modal" data-title="<?php echo $message->title; ?>" id="fullMessage_<?php echo $message->id; ?>">
            <!-- Display longer message here -->
        </div>
    </div>
<?php endforeach; ?>

Javascript：

<script type="text/javascript">
    var messages_viewDialogOptions = {
        autoOpen: false,
        modal: true,
        width: 600,
        buttons: [{
            text:"Mark as Read",
            click:function(){
                //Ajax Callback here
                $(this).dialog('close');
            }
        },{
            text:"Close",
            click:function(){$(this).dialog('close');}
        }]
    }
    $(function(){
        $('.mod_message_modal').each(function(){
            $(this).dialog(messages_viewDialogOptions);
        });
        $('.mod_message_readmore').click(function(e){
            var currentDialog = $('#fullMessage_'+$(this).parents('.mod_message_short').data('messageid'));
            currentDialog.dialog('option','title',currentDialog.data('title'));
            currentDialog.dialog('open');
            e.preventDefault();
        });
    });
</script>

【讨论】：