javascript在网页中心弹出一个div元素

Question

如何在网页中心弹出一个 div 元素。 也。我需要 div 上的按钮来关闭 div 元素。 并且div元素完全不会影响网页。

在我的 JS 代码中，我已经创建了一个 div 元素。

var div = document.createElement("div");
div.style.background = "white";
div.id = "demo";
$(div).addClass("GridTableContent");

我想弹出我在网页中心创建的 div 元素。 并添加一个关闭 div 按钮。

更新

我认为我需要提供有关问题的更多详细信息

首先，这段代码被注入到一个 chrome 扩展的网页中，所以它是纯 javascript

我肯定写不出来

<div class='overlay'>
<div class='popup'>
<div class='close'>&#10006;</div>
   <h2>Popup</h2>
</div>

这都是动态创建的，所以我想我不能使用下面提供的代码。 我以前看到其他问题，有人建议我使用 http://www.ericmmartin.com/projects/simplemodal-demos/

我发现该页面中的 BASIC MODAL DIALOG 很好， 有没有办法使用它。

更新

我觉得我需要提供更详细的信息。

一开始我创建了一个按钮并已经注入到网页中

var div = document.getElementById("btnSearch");
var input = document.createElement('input');
input.id='visualization';
input.type='button';
input.value='visualiztion';
$(input).insertAfter(div);

然后我创建一个 div 元素

var div = document.createElement("div");
div.style.background = "white";
div.id = "demo";

我该怎么做，当我单击按钮时，中心网页上会弹出 div 元素。我想我还需要创建一个按钮来关闭 div 元素。

Answer 1

试试这样的东西

HTML

<div class='overlay'>
<div class='popup'>
    <div class='close'>&#10006;</div>
     <h2>Popup</h2>
</div>

显示

CSS

*{
 margin:0;
}
html, body {
 height:100%;
}
.overlay {
 position:absolute;
 display:none;
 top:0;
 right:0;
 bottom:0;
 left:0;
 background:rgba(0, 0, 0, 0.8);
 z-index:9999;
}
.close {
 position:absolute;
 top:-40px;
 right:-5px;
 z-index:99;
 width:25px;
 height:25px;
 cursor:pointer;
 color: #fff;
 display: inline-block;
}
.popup {
 position:absolute;
 width:50%;
 height:50%;
 top:25%;
 left:25%;
 text-align:center;
 border-radius: 10px;
 background:white;
 box-shadow: 0px 0px 10px 0px black;
}
.popup h2 {
 font-size:15px;
 height:50px;
 line-height:50px;
 color:#fff;
 background:rgb(24, 108, 209);
 border-radius:10px 10px 0px 0px;
}
.button {
 width:50px;
 height:50px;
 color:#fff;
 font-weight:bolder;
 border-radius:10px;
 background:silver;
}

脚本

$('.button').click(function () {
  $('.overlay').show();
})
$('.close').click(function () {
  $('.overlay').hide();
})

DEMO

更新

动态注入： DEMO