Question

有没有办法让jQuery [UI]就地生成dialog？或者轻松地将其移回并让它工作？

YUI2's Panel让你自由地做到这一点，它假设你知道你在做什么，并将标记留在你放置的位置。
但是现在我已经开始使用更简单的jQuery，我注意到了一个限制; jQuery UI似乎只在body。

下直接创建对话框

考虑this example;
假设您想使用div作为命名空间css的一种方式通过在所有选择器前添加.className前缀来编写与功能相关的样式表，并在带有class="className"的div中添加标记。

Some

<div class="sectiona">
    <div class="popup" title="A popup">
        This text should be <span class="emphasis">blue</span>
    </div>
</div>

irrelevant

<div class="sectionb">
    <div class="popup" title="B popup">
        This text should be <span class="emphasis">red</span>
    </div>
</div>

content

<script>$(function() { $('.popup').dialog(); });</script>

.emphasis {
    color : yellow;
}

.sectiona .emphasis {
    color : blue;
}

.sectionb .emphasis {
    color : red;
}

弹出div（.popup）将被移动到正文，失去所有的CSS！（显然在现实生活中会更复杂）。由于所有对话框/面板都是绝对定位的，并且我希望它们保留的div具有静态位置并且是身体的子项wouldn't make any difference at all to keep them there。

不要把这个css命名空间技术（如果那是正确的措辞）作为想要这个的唯一原因，我确定还有其他用例

Answer 1

有一个appendTo选项，您需要为每个单独的弹出窗口指定它：

// HTML
// added a common "section" class to your divs
Some
<div class="section sectiona">
    <div class="popup" title="A popup">This text should be <span class="emphasis">blue</span>
    </div>
</div>
irrelevant
<div class="section sectionb">
    <div class="popup" title="B popup">This text should be <span class="emphasis">red</span>
    </div>
</div>
content

// javascript
$('.section').each(function () {
    $(this).find('.popup').dialog({
        appendTo: this
    });
});

fiddle

保持对话框div我把它放在哪里

1 个答案: