divとその子をモーダル/ポップアップに変える？

Question

私はdivとその子を元のDOM位置に残したままモーダル/ポップアップで表示しようとしています。親div内でチェックボックスがクリックされたときに広範なツリートラバーサルを必要とするjavascriptのため、DOM内でdivやそのコンテンツを移動することができません。私たちはプロジェクトでブートストラップモーダルを使用しているので、モーダルを使用できるソリューションが理想的です。

*私は、カスタム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のようないくつかの属性をクリーンアップする必要があります。だから、最終版が

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

ある

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

あなたはおそらく

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

のようなモーダルラッピングのdivでクローン化された内容をラップする必要があります。また、あなたは近くにモーダルのdivを削除する必要があります