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

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

与模态对话框类似。

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

Answer 2

这就是我要做的，而不是搞乱javascript，使用jQuery会更容易。因为你标记了jQuery，我提供了我认为最有效的方法。

$(document).ready(function() {

$('<div class="overlay" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, .5);">').appendTo('body');
$('<div class="popup" style="z-index: 8888;"><img src="startbutton.png" width="400" height="29" /></div>').appendTo('body');

$('.popup').on('click', function() {
    $('.popup, .overlay').remove();
});

});

Answer 3

向DOM元素添加动作侦听器

<!DOCTYPE html>
<html>
   <head>
      <title>Removable</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <style>
      </style>
      <script>
         function main() {
            var image = document.getElementById("myImage");
            image.addEventListener("click", function() {
               image.parentNode.removeChild(image);
            });
         }
         window.onload = main;
      </script>
   </head>
   <body>
      <div>
         <img src="../img/dice.png" alt="dice" id="myImage">
      </div>
   </body>
</html>

单击时删除附加的子项

3 个答案: