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/

而且我發現該頁面的基本模態對話框是很好的，有什么辦法使用它。

更新

我發現需要提供更詳細的信息。

首先，我創建一個按鈕並已將其注入到網頁中

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