删除追加的子上点击

我使用下列上创建的网站加载图像弹出 -删除追加的子上点击

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

我怎么能修改此使点击时图像消失？
是否有可能有在网页“淡出”的其余部分，直到被点击的形象呢？

一个模式对话框类似。

来源

2014-01-08 Sainath Krishnan

没有一个jQuery标签真的对这个属于？您使用纯JS的一切...... – Rooster

你是什么意思淡出？ – zero298

中淡出，变灰页面的其余部分，并且将焦点设置对话框！ :) –

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

来源

2014-01-08 18:45:32 adeneo

非常感谢你的作品！是否有可能灰色的页面的其余部分，直到图像被点击？ –

@SainathKrishnan - 补充说 – adeneo

完美的作品，谢谢！ –

这是我会怎么做，而不是使用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(); 
}); 

});

来源

2014-01-08 18:43:51 CRABOLO

添加动作监听的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>

来源

2014-01-08 18:44:34 zero298

这是一半的答案。你有第二个问题的解决方案吗？ – putvande

删除追加的子上点击

回答

相关问题