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

<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

10-05 20:50
查看更多