Ein Div und seine Kinder in ein Modal/Popup verwandeln?

Question

Ich versuche, das div und seine Kinder in Modal/Popup anzeigen zu lassen, während sie immer noch in ihren ursprünglichen DOM-Positionen bleiben. Ich bin nicht in der Lage, das div oder seine Inhalte im DOM herum zu verschieben, da Javascript erforderlich ist, das eine umfangreiche Baumdurchsuchung erfordert, wenn ein Kontrollkästchen innerhalb des übergeordneten div angeklickt wird. Wir verwenden Bootstrap-Modale im Projekt, daher wäre eine Lösung, die es mir erlaubt, ein Modal zu verwenden, ideal.

* Ich weiß, dass ich dies mit benutzerdefinierter CSS erreichen kann, aber ich würde gerne wissen, ob es ein sauberer Weg (Beispiel: $('div').modal('show')), anstatt ich ein modalen/Pop-up Fälschen

<!--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

Sie können klonen Sie ein div, bevor Sie ein Popup daraus machen.

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

Hinweis, müssen Sie einige Attribute wie id bereinigen, wenn es irgendwo anders verwendet wird. Darüber hinaus haben Sie modal div auf der Nähe zu entfernen:

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

Sie wahrscheinlich geklonten Inhalte mit modaler Verpackung div wie

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

wickeln müssen also die endgültige Version

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

ist