如何使用JavaScript创建模态弹出窗口？

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

如何使用JavaScript和CSS创建一个带有灰色背景的模态弹出窗口?

Can anyone show me an example?

有人能告诉我一个例子吗?

6 个解决方案

#1

I would recommend the jQuery one...

我会推荐jQuery一个......

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.

您可以查看创建JQuery对话框;我相信这会让你得到你正在寻找的形态。我不认为实际的弹出窗口是你想要的解决方案。

#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.

HI,你可以使用两个div来达到这个目的。第一个div包含所有主页内容,第二个div用于禁用内容。当您触发事件时,使第二个div填充所有UI,它应该在第一个之上。如果你在第一个div中有任何组合框,那么你必须禁用它或使其不可见,否则它将弹出第一个div。

#4

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

您可以使用我的JS库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

看看getbootstrap.com - >模态

#6

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

它被称为“灯箱”,之前已被讨论了数十次。

#1