将jQuery UI对话框附加到其父级 [英] Append jQuery UI dialog to its parent

问题描述

我有以下html:

<ul id="sortable">
<li class="ui-state-default">1
    <div class="dialog-modal" title="Animal Facts" style="display:none;">
    <p>What is the fastest animal on Earth?</p>
    </div>
  </li>
<li class="ui-state-default">2
<div class="dialog-modal" title="Animal Facts" style="display:none;">
<p>What is the largest animal on Earth?</p>
</div></li>

以及以下jQuery代码:

​ and the following jQuery code:

$( ".dialog-modal" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true
        });

$('.ui-state-default').click(function() {
    $(this).find("div").dialog( "open" );
 });

这不会在单击时打开模式对话框，我想念什么?

This does not open the modal dialog on click, what am I missing?

感谢您的帮助.

推荐答案

这是jQuery UI对话框的当前行为.

This is a current behavior of the jQuery UI dialog.

定义后，将创建jQuery UI对话框并将其附加到正文中.

When defined the jQuery UI dialog is created and appended to the body.

解决方法是在创建后将对话框附加到其原始父对话框，例如:

The workaround solution is to append the dialog to its original parent after the creation like:

$(function () {
    $(".dialog-modal").each(function (index) {

        var origContainer = $(this).parent();

        $(this).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            create: function () {
                $(this).closest('div.ui-dialog')
                    .click(function (e) {
                    e.stopPropagation();
                });
            }
        }).parent().appendTo(origContainer);
    });

    $('.ui-state-default').click(function (event) {
        $(this).find("div").find(".dialog-modal").dialog("open");
    });
});

重要说明:请查看定义的create事件；这是必要的，因为在对话框中的每次单击都会触发在.ui-state-default类元素click上执行的open dialog方法！形式上正确是因为现在对话框包含在其父级内部，并且单击通过.ui-state-default类传播到父级.有了stopPropagation，问题就解决了.

An important note: look at the create event defined; it's necessary because, the open dialog method executed on the .ui-state-default class elements click is triggered on every click inside the dialog! It's formally correct because now the dialog is contained inside its parent and the click is propagated to the parents with .ui-state-default class. With stopPropagation the problem is solved.

有点黑，但是可以用.

正在工作的小提琴: http://jsfiddle.net/IrvinDominin/Avtg9/8/

在jQuery UI 1.10.0的未来版本中将添加选项appendTo，以解决这种情况，而无需任何解决方法

With the future version of jQuery UI 1.10.0 will be added the option appendTo, to handle this situation without any workaround http://api.jqueryui.com/dialog/#option-appendTo

这篇关于将jQuery UI对话框附加到其父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！