没有 jQuery 的模态对话框-前端问题

Modal Dialog without jQuery(没有 jQuery 的模态对话框)

本文介绍了没有 jQuery 的模态对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要使用 javascript 在网页上创建模式对话框.通常这很容易，因为我可以使用 jQueryUI 或 BlockUI 之类的东西，但需要注意的是，我不允许使用 jQuery，并且我需要支持 IE9 怪癖模式(即没有 html5 doctype).我在网上找不到任何与我需要的东西有关的东西.有人会有建议吗?谢谢.

解决方案

用中间居中的div做overlay怎么样?

您可以拥有可以隐藏的 div(使用 javascript):

 <div id="overlay"><p>你想让用户看到的内容放在这里.</p></div></div>

叠加层的 CSS 样式如下所示:

 #overlay {可见性:隐藏；位置:绝对；左:0px；顶部:0px；宽度:100%；高度:100%；文本对齐:居中；z 指数:1000；}

然后就可以用JavaScript来切换overaly div中内容的可见性了:

 函数覆盖(){el = document.getElementById("overlay");el.style.visibility = (el.style.visibility == "visible") ?隐藏":可见"；}

更多示例:http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

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.

解决方案

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

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>

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

Then 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";
 }

More for example here: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

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