刪除追加的子上點擊

我使用下列上創建的網站加載圖像彈出 -刪除追加的子上點擊

<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

刪除追加的子上點擊

回答

相關問題