How to create a modal popup using JavaScript? [closed]

Answer 1

You can look into creating a JQuery dialog; I believe this will get you the modality you're looking for. I do not think an actual popup window is a solution you want.

Answer 2

HI, You can use two divs for this purpose. The first div contains all your main page contents and the second one is for disabling the contents. When you fire the event make the second div fill all the UI and it should be on top of the first one. If you have any combo box in the first div then you have to disable it or make it invisible otherwise it will pop out of the first div.

Answer 3

I would recommend the jQuery one...

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

Answer 4

Have a look to getbootstrap.com -> modal

Answer 5

It's called a "lightbox" and it's been discussed dozens of times before.

Answer 6

You can use my JS library http://www.cristianizzo.com/DEV/Qpass/index.php?r=JS&v=modal

here an example

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

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

You can pass a callback function or extend the modal pushing an other content

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