将 div 及其子项变成模态/弹出窗口？答案

【问题标题】：Turning a div and its children into a modal/popup?将 div 及其子项变成模态/弹出窗口？
【发布时间】：2017-10-29 18:46:47
【问题描述】：

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

*我知道我可以使用自定义 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>

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案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');

【讨论】：