Html 带有部分不透明灰色背景的对话框窗口
当用户单击一个链接时，我想在浏览器窗口中创建一个以灰色为中心的“弹出”对话框，与此类似： 请注意，用户可以单击对话框外的任何位置来取消该对话框 我尝试了以下内容，但它只是在白色页面中创建了一条黑色条纹，如下所示： 这是我的密码：Html 带有部分不透明灰色背景的对话框窗口,html,css,Html,Css,当用户单击一个链接时，我想在浏览器窗口中创建一个以灰色为中心的“弹出”对话框，与此类似： 请注意，用户可以单击对话框外的任何位置来取消该对话框 我尝试了以下内容，但它只是在白色页面中创建了一条黑色条纹，如下所示： 这是我的密码： 函数blah（）{ var gab=document.createElement（'div'）； gab.setAttribute（'id'，'OVER'）； gab.innerHTML='hello'； 文件.正文.附件（gab）； } #完毕{ 宽度：100%
函数blah（）{
var gab=document.createElement（'div'）；
gab.setAttribute（'id'，'OVER'）；
gab.innerHTML='hello'；
文件.正文.附件（gab）；
}#完毕{
宽度：100%；
身高：100%；
左：0；/*IE*/
排名：0；
文本对齐：居中；
z指数：5；
位置：固定；
背景色：#fff；
}
.覆盖{
宽度：100%；
z指数：6；
左：0；/*IE*/
最高：30%；
字体颜色：#cdcdcd；
字号：0.8em；
文本对齐：居中；
位置：固定；
背景色：#000；
}
标题
这是标题
这里有一些文字
// 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;
}
//JS，替换此
gab.innerHTML='hello'；
//CSS
.覆盖{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.4）；//0.4为不透明度；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
.对话{
背景色：#fff；
}
函数blah（）{
var gab=document.createElement（'div'）；
gab.setAttribute（'id'，'OVER'）；
gab.innerHTML='hello'；
文件.正文.附件（gab）；
}#完毕{
宽度：100%；
身高：100%；
左：0；
/*即*/
排名：0；
文本对齐：居中；
z指数：5；
位置：固定；
背景色：rgba（0,0,0,0.3）；
}
.覆盖{
宽度：100%；
z指数：6；
左：0；
/*即*/
最高：30%；
/*字体颜色：#cdcdcd*/
颜色：#cdcdcd；
字号：0.8em；
文本对齐：居中；
位置：固定；
背景色：#fff
}这是标题
下面是一些文字// 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>
//css:
.覆盖{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.4）；//0.4为不透明度；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
.对话{
背景色：#fff；
}
//html:
标题
这是标题
这里有一些文字
你好