没有jQuery的模态对话框 [英] Modal Dialog without jQuery

问题描述

我需要使用javascript在网页上创建一个模态对话框。通常这很容易，因为我可以使用像jQueryUI或BlockUI这样的东西，但这里的注意事项是我不允许使用jQuery，我需要支持IE9怪癖模式（即没有html5的doctype）。我在网上找不到我需要的东西。有人会有建议吗？谢谢。

I need to create a modal dialog on a webpage using javascript. Normally this would be easy as I could use something like jQueryUI or BlockUI, but the caveat here is that I'm not permitted to use jQuery, and I need to support IE9 quirks mode (ie no html5 doctype). I can't find anything online pertaining to what I need. Would anyone have suggestions? Thanks.

推荐答案

如何以中间为中心的div进行叠加？

What about doing overlay with a div centered in the middle?

你可以拥有你可以隐藏的div（使用javascript）：

You can have div which you can hide (using javascript):

 <div id="overlay">
  <div>
      <p>Content you want the user to see goes here.</p>
  </div>
 </div>

覆盖层的CSS样式可能如下所示：

The CSS style for overlay can look like this:

 #overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 1000;
 }

比起你可以使用javascript来切换内容在Overaly div中的可见性：

Than you can use javascript to switch the visibility of the content in the overaly div:

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

更多例如这里： http://raventools.com/blog/create-a-modal-dialog-using-css-and -javascript /

这篇关于没有jQuery的模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！