javascript mostra um elemento div no centro da página web

Como poderia colocar um elemento div no centro da página? tambem .Preciso de um botão no div para fechar o elemento div. e o elemento div não afetará a página web.

No meu código JS, já criei um elemento div.

var div = document.createElement("div");
div.style.background = "white";
div.id = "demo";
$(div).addClass("GridTableContent");
Quero mostrar o elemento div que criei no centro da minha página web. e adicione um botão para fechar o div.

actualizar

Acho que preciso de dar mais detalhes sobre o problema. Primeiro,isto ... o código é injectado numa página web numa extensão cromada, por isso é javascript puro

De certeza que não consigo escrever isto. 
<div class='overlay'>
<div class='popup'>
<div class='close'>&#10006;</div>
   <h2>Popup</h2>
</div>
Foi tudo criado dinamicamente, por isso não posso usar o código abaixo. Eu vejo outra pergunta antes, alguém me sugere usar http://www.ericmmartin.com/projects/simplemodal-demos/

e acho que a janela MODAL básica nessa página é boa , Há alguma maneira de usar isso?

actualizar

Acho que preciso de dar a informação mais detalhada.

A princípio, crio um botão e já injectei numa página web 

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

Depois crio um elemento div 

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

Como posso fazer isso, quando estou clicando no botão, em seguida, o elemento div aparece na página web no centro.também acho que preciso criar um botão para fechar o elemento div.

Author: T J, 2014-05-14
Source

1 answers

Tenta algo assim.

HTML 

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

Mostra

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

DEMONSTRAÇÃO

Actualizar

Injecção dinâmica: DEMO

 0
Author: T J, 2014-05-14 09:08:50