javascript pop up a div element in the center of the webpage

Question

How could I pop up a div element in the center of the webpage. also .I need a button on the div to close the div element. and the div element will not affect the webpage at all.

In my JS code, I already have a div element created.

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

I want to pop up the div element I created in the center of my webpage. and add a close the div button.

Update

I Think I need to provide more detail about the problem

First,this code are injected into a webpage in a chrome extension so it's pure javascript

surely I can't write this

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

It'a all created dynamically,so I guess I can't use the code provided below. I see other question before ,someone suggest me to use http://www.ericmmartin.com/projects/simplemodal-demos/

and I find the BASIC MODAL DIALOG in that page is good , Is there any way to use that .

Update

I find I need to give the more detailed information.

At first I create a button and already injected into a webpage

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

Then I create a div element

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

How can I do this,when I'm click the button then the div element popup at the webpage in the center.also I guess I need to create a button to close the div element.

Answer 1

Try Something like this

HTML

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

Show

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

SCRIPT

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

DEMO

Update

Dynamic injection: DEMO