[英]javascript pop up a div element in the center of the webpage
How could I pop up a div element in the center of the webpage. 如何在网页中央弹出div元素。 also .I need a button on the div to close the div element.
我也需要在div上单击一个按钮以关闭div元素。 and the div element will not affect the webpage at all.
并且div元素完全不会影响该网页。
In my JS code, I already have a div element created. 在我的JS代码中,我已经创建了一个div元素。
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. 我想弹出在网页中心创建的div元素。 and add a close the div button.
并添加关闭div按钮。
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 首先,此代码以chrome扩展名注入到网页中,因此它是纯JavaScript
surely I can't write this 我当然不能写这个
<div class='overlay'>
<div class='popup'>
<div class='close'>✖</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/
我之前看到其他问题,有人建议我使用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 然后我创建一个div元素
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. 当我单击按钮,然后在中心网页中的div元素弹出时,该怎么做。我想我也需要创建一个按钮来关闭div元素。
Try Something like this 尝试这样的事情
HTML HTML
<div class='overlay'>
<div class='popup'>
<div class='close'>✖</div>
<h2>Popup</h2>
</div>
Show 节目
CSS 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();
})
Update 更新
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.