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

问题

How to create a modal popup window with background with gray color using JavaScript and CSS?

Can anyone show me an example?

回答1:

I would recommend the jQuery one...

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

回答2:

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.

回答3:

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.

回答4:

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

回答5:

Have a look to getbootstrap.com -> modal

回答6:

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

来源：https://stackoverflow.com/questions/724103/how-to-create-a-modal-popup-using-javascript

标签

javascript

html

dhtml