关闭模态对话框屏幕

Question

我目前正在为我的注册页面在网站上实现一个模式对话框屏幕，为您节省时间，我不会撒谎并说我正在遵循本教程-http: //raventools.com/blog/create-a-模态对话使用CSS和JavaScript /

一切正常，只是它没有显示如何在用户单击对话框外部时（如在其周围的其余部分上）关闭对话框。

我怎样才能做到这一点？

谢谢你的帮助

Answer 1

您只需要从想要触发关闭的任何事件中再次调用overlay()即可。 它切换叠加层的可见性（如果叠加层可见，则调用overlay()将其隐藏，反之亦然）：

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

您也可以考虑使用类似jQuery UI的对话框小部件之类的东西。