Question

我正在尝试将div及其子项显示在模态/弹出窗口中，同时仍保留在原始DOM位置。我无法在DOM中移动div或其内容，因为当在父div中单击一个复选框时，某些javascript需要大量的树遍历。我们在项目中使用bootstrap模态，因此允许我使用模态的解决方案将是理想的。

*我知道我可以使用自定义CSS实现这一点，但我想知道是否有一种更清洁的方式（例如：$('div').modal('show')），而不是伪造模态/弹出窗口

<!--datagrid-fields is what I am trying it make into a modal/popup-->
<!--getSelect() just returns an HTML checkbox list-->

    <li id="gridCheckboxesEntryInfo" class="threeColumns">
        <input type="checkbox" onClick="selectAllFields(this)"> Select All<br>
        <a class="btn btn-primary reorderFields" data-toggle="modal" data-target="#reorderModal">Reorder Fields</a>
        <a class="btn btn-success selectFields">Select Fields</a>
        <div style="display:inline-block;margin-left: 5%;"><h3 style="display:inline-block;font-size: 18px">Scroll Down to View Fields</h3><div class="arrow bounce"><a class="arrow bounce"><i class="fa fa-arrow-down fa-2x"></i></a></div></div>
        <div id="datagrid-fields">
            <?=getSelect($fieldsbysetwithwidget, $fieldsindb, 'checkboxes');?>
        </div>
    </li>

Answer 1

你可以在弹出一个div之前克隆它。

$('#datagrid-fields').clone().modal('show')

注意，如果在其他地方使用了id，则需要清理一些属性。此外，您必须在关闭时删除模态div：

$cloned.on('hidden.bs.modal', function () { $cloned.remove() });

你可能需要用像

这样的模态包装div来包装克隆的内容

$cloned.wrap('<div class="modal ..."></div>');

所以最终版本是

var $cloned = $('#datagrid-fields').clone();
$cloned.wrap('<div class="modal ..."></div>');

var $modal = $cloned.parent();
$modal.on('hidden.bs.modal', function () { $modal.remove() });
$modal.modal('show');

Answer 2

答案实际上是打电话给

$('#datagrid-fields').clone().modal('show');

在加载DOM之前，请将其存储在变量中，然后在模式内部使用变量。

把一个div和它的孩子变成一个模态/弹出窗口？

2 个答案: