Javascript 将div及其子对象转换为模式/弹出窗口？

我试图让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>

选择全部

重新排序字段
选择字段
向下滚动以查看字段

您可以在弹出div之前克隆它

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

注意，如果在其他地方使用，您需要清理一些属性，如

id

。此外，您必须在关闭时删除模式div：

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

您可能需要使用模态包装div包装克隆的内容，如

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

$cloned.wrap（“”）；

所以最终版本是

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');

var$clone=$（“#数据网格字段”）.clone（）；
$cloned.wrap（“”）；
var$modal=$cloned.parent（）；
$modal.on（'hidden.bs.modal'，function（）{$modal.remove（）}）；
$modal.modal（'show'）；