JavaScript를 사용하여 모달 팝업을 만드는 방법은 무엇입니까?

Question

JavaScript와 CSS를 사용하여 회색 배경의 모달 팝업 창을 만드는 방법은 무엇입니까?

누구든지 나를 보여줄 수 있습니까? 내가 jQuery를 하나를 추천 할 것입니다

Answer 1

...

http://jqueryui.com/demos/dialog/

Answer 2

HI, 당신은이 목적을 위해 두 개의 div를 사용할 수 있습니다. 첫 번째 div는 모든 기본 페이지 내용을 포함하고 두 번째 div는 내용을 비활성화하기위한 것입니다. 이벤트를 발생 시키면 두 번째 div가 모든 UI를 채우며 첫 번째 div의 맨 위에 있어야합니다. 첫 번째 div에 콤보 상자가 있으면 비활성화하거나 보이지 않게해야합니다. 그렇지 않으면 첫 번째 div에서 빠져 나옵니다.

Answer 3

"라이트 박스"라고하며, discussed dozens of times before입니다.

Answer 4

JQuery dialog을 살펴볼 수 있습니다. 나는 이것이 당신에게 당신이 찾고있는 양상을 갖게 될 것이라고 믿습니다. 나는 실제 팝업 창이 당신이 원하는 해결책이라고 생각하지 않는다.

Answer 5

당신은 내 JS 라이브러리 여기 http://www.cristianizzo.com/DEV/Qpass/index.php?r=JS&v=modal

예를 사용할 수 있습니다

<!-- Button trigger modal --> 
<a href="#" modal="Modal" modal-Id="modalDialog">Modal Standard</a> 

<!-- Modal --> 
<div id="modalDialog" class="modal_hidden"> //content </div> 

당신은 콜백 함수를 전달하거나

<!-- Button trigger modal --> 
<a href="#" modal="Modal" modal-Id="modalFunction" modal-Size="small" modal-Fn="fnTest">Modal Fn</a> 

<!-- Modal --> 
<div id="modalFunction" class="modal_hidden"> 
//Content 
<a href="#" onclick="Modal.extendModal('idDiv', fnName); return false;"></a> 
</div> 

<!-- Second Modal --> 
<div id="idDiv" class="modal_hidden"> 
//Content 
</div> 

<!-- JS --> 
function fnTest(){ 
alert('execute new function'); 
} 

<!-- JS --> 
function fnName(){ 
alert('execute new function'); 
} 

Answer 6

가지고 타 컨텐츠를보고 밀어 모달을 확장 할 수 있습니다 getbootstrap.com -> 모달