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按钮。

update

我认为我需要提供有关问题的更多详细信息 首先，此代码被注入chrome扩展名中的网页，因此是纯JavaScript

我不能写这个

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

this'a都是动态创建的，所以我想我无法使用下面提供的代码。 我以前看到其他问题，有人建议我使用

http：//www.ericmmartin.com/projects/simplemodal-demos/

我在该页面中发现基本的模态对话框很好，
有什么方法可以使用。

update

我发现我需要提供更详细的信息。

首先，我创建一个按钮并已经注入了网页

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元素弹出窗口。

trone类似这样的东西

html

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

展示

Answer 1

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

script

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

demo

update

动态注射： demo