Question

我正在尝试在javascript中实现lightbox / modal box类型的弹出窗口，而不使用jquery，scriptaculous，prototype或任何库。我在stackoverflow上发现了一个非常好的开始：

How to code a JavaScript modal popup (to replace Ajax)? （这里没有重复代码）

我尝试进行简单的更改并且一切正常，我甚至添加了HTML内容并且它有效，但是我坚持添加滚动条，我做了我的研究并没有发现任何事情，因为几乎每个谷歌上的答案都基于jquery （甚至我上面提到的问题的所有其他答案都包括jquery！）任何建议或链接都会很棒，

感谢

Answer 1

我认为这篇名为“CSS OVERLAY TECHNIQUES”的文章将对您有所帮助。 http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

它提供了几种在没有jquery的情况下完成上述任务的方法。

例如，通过此链接描述的技术之一是：

技术＃1：绝对定位的元素

绝对可以创建叠加层的第一种方式   在页面上定位HTML元素。会有一个空的div   在标记中，使用CSS，这个div绝对定位   给出一个高z-index值，以确保它保持在所有其他值之上   页面上的元素，除了在此之上打开的模态   叠加，它将获得比叠加更高的z索引。
<html>
  <body>
   <div class="overlay"></div>
   
  <body>
<html>
假设我们已经为标记添加了一个空div并给出了它是一个类.overlay，用于在页面上定位此叠加层的CSS是：
html, body{
  min-height: 100%;
}
body{
  position: relative;
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}

Answer 2

如果您想要一个模态对话框 for real ，请使用window.showModalDialog：

returnVal = window.showModalDialog(uri[, arguments][, options]);

，其中

returnVal是一种变体，表示由returnValue指定的文档窗口设置的uri属性。
uri是要在对话框中显示的文档的URI。
arguments是一个可选变体，包含应传递给对话框的值;这些在window对象的window.dialogArguments属性中可用。
options一个可选字符串，用于指定对话框的窗口装饰。

请注意，真实模式会停止javascript执行（例如alert，confirm和prompt），与假模式不同用jQuery这样的库创建的对话框。

从头开始javascript弹出没有库

2 个答案: