Question

当用户单击链接时，我想创建一个“弹出”对话框，该对话框位于浏览器窗口的中央，灰色部分类似于此：

请注意，用户可以在对话框外的任意位置单击以将其关闭。

我已经尝试遵循this example，但是它只是在白色页面上创建了这样的黑色条纹：

这是我的代码：

function blah() {
  var gab = document.createElement('div');
  gab.setAttribute('id', 'OVER');
  gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
  document.body.appendChild(gab);
}

#OVER {
  width:100%;
  height:100%;
  left:0;/*IE*/
  top:0;
  text-align:center;
  z-index:5;
  position:fixed;
  background-color:#fff;
}
.overlay {
  width:100%;
  z-index:6;
  left:0;/*IE*/
  top:30%;
  font-color:#cdcdcd;
  font-size:0.8em;
  text-align:center;
  position:fixed;
  background-color:#000;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/test.css">
</head>
<body>
  <h1>This is the title</h1>
  Here is some text <a href="#" onclick="blah();return false;">Click me</a>
</body>
</html>

Answer 1

这应该有效：

// JS, replace this
gab.innerHTML='<div class="overlay"><div class="dialog"><h1>hello</h1></div></div>';


// CSS
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); // 0.4 is the opacity;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.dialog {
    background-color: #fff;
}

Answer 2

我从您的代码中编辑的代码

function blah() {
  var gab = document.createElement('div');
  gab.setAttribute('id', 'OVER');
  gab.innerHTML = '<div class="overlay"><h1>hello</h1></div>';
  document.body.appendChild(gab);
}

#OVER {
  width: 100%;
  height: 100%;
  left: 0;
  /*IE*/
  top: 0;
  text-align: center;
  z-index: 5;
  position: fixed;
  background-color: rgba(0,0,0,0.3);
}

.overlay {
  width: 100%;
  z-index: 6;
  left: 0;
  /*IE*/
  top: 30%;
  /* font-color: #cdcdcd; */
  color: #cdcdcd;
  font-size: 0.8em;
  text-align: center;
  position: fixed;
  background-color: #fff
}

<h1>This is the title</h1>
Here is some text <a href="#" onclick="blah();return false;">Click me</a>

但是，如果我是你，我正在尝试像这样modal

我刚刚添加了toggle。

不是是制作modal的最佳代码。

仅供参考。

function modalOn() {
  let gab = document.createElement('div');
  gab.setAttribute('id', 'OVER');
  gab.setAttribute('onClick', 'modalOff()');
  gab.innerHTML = '<div class="overlay"><h1>hello</h1></div>';
  document.body.appendChild(gab);
}

function modalOff() {
  let modal = document.getElementById('OVER');
  document.body.removeChild(modal);
}

#OVER {
  width: 100%;
  height: 100%;
  left: 0;
  /*IE*/
  top: 0;
  text-align: center;
  z-index: 5;
  position: fixed;
  background-color: rgba(0,0,0,0.3);
}

.overlay {
  width: 100%;
  z-index: 6;
  left: 0;
  /*IE*/
  top: 30%;
  color: #cdcdcd;
  font-size: 0.8em;
  text-align: center;
  position: fixed;
  background-color: #000;
}

<h1>This is the title</h1>
Here is some text <a href="#" onclick="modalOn();return false;">Click me</a>

Answer 3

多亏了fmontes，我最终得到了这段似乎可行的代码：

// css:

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); // 0.4 is the opacity;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.dialog {
    background-color: #fff;
}

// html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/test.css">


</head>
<body>

<h1>This is the title</h1>
Here is some text <a href="#" onclick="document.getElementById('overlay').style.visibility = 'visible';return false;">Click me</a>
<div id='overlay' class="overlay" onclick="document.getElementById('overlay').style.visibility = 'hidden';return false;" style="visibility:hidden">
    <div class="dialog"><h1>hello</h1></div></div>
</body>
</html>

具有不透明灰色背景的对话框窗口

3 个答案: