我正在使用以下内容在网站加载时创建图片弹出窗口-
<script type="text/javascript">
function showPopup()
{
var div = document.createElement('div');
div.className += 'popup';
div.innerHTML = "<img src='startbutton.png' width='400' height='293' >"
document.body.appendChild(div);
}
window.onload = showPopup;
这是CSS
<style type="text/css">
.popup{
position:absolute;
width: 0px;
height: 0px;
left:40%;
top:30%;
}
如何修改此设置,以便单击后图像消失?
是否可以使页面的其余部分“淡出”,直到单击图像为止?
类似于模式对话框。
最佳答案
function showPopup() {
var div = document.createElement('div');
var cover = document.createElement('div');
var image = document.createElement('img');
image.src = 'startbutton.png';
image.width = 400;
image.height = 293;
cover.style.position = 'fixed';
cover.style.background = 'rgba(0,0,0,0.5)';
cover.style.height = '100%';
cover.style.width = '100%';
cover.style.top = '0';
cover.style.left = '0';
div.className = 'popup';
div.style.position = 'fixed';
div.style.top = '50%';
div.style.left = '50%';
div.style.margin = '-200px 0 0 -146px';
div.appendChild(image);
image.onclick = function() {
div.parentNode.removeChild(div);
cover.parentNode.removeChild(cover);
}
document.body.appendChild(cover);
document.body.appendChild(div);
}
window.onload = showPopup;
FIDDLE