javascript - 单击时删除附加的子项

Question

我正在使用以下内容在网站加载时创建图像弹出窗口 -

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

1. 我如何修改它以便在点击时图像消失？
2. 是否可以让页面的其余部分“淡出”直到图片被点击？

类似于模态对话框。

Answer 1

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