div와 그 자식을 모달/팝업으로 변환 하시겠습니까?

div와 그 자식을 모달/팝업으로 표시하고 원래 DOM 위치를 유지하려고합니다. 부모 div 안에 체크 상자를 클릭하면 광범위한 트리를 탐색해야하는 일부 자바 스크립트 때문에 div 또는 해당 내용을 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>

출처

2017-10-29 J Dub

당신은 할 수에게 날조 나보다 오히려, 그것을 팝업하기 전에 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를 제거해야

출처

2017-10-29 18:52:29

div와 그 자식을 모달/팝업으로 변환 하시겠습니까?

답변

관련 문제