Удаление прилагаемую ребенка по щелчку

Я использую следующие для создания всплывающего окна изображения на сайте нагрузки -Удаление прилагаемую ребенка по щелчку

<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

Удаление прилагаемую ребенка по щелчку

ответ

Смежные вопросы