Pop-up box not openning

-2

Я пытаюсь открыть всплывающее окно при нажатии на ссылку ... Я нашел это решение: http://jsfiddle.net/loktar/rxGmk/ и применил его, однако я не могу открыть всплывающее окно , Следующий код является частью набора фреймов. Любая помощь? Я использовал тот же CSS. PS: работает jsfiddle.Pop-up box not openning

Код:

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<link rel="stylesheet" type="text/css" href="custom.css"> 


<script> 
var opener = document.getElementById("opener"); 

opener.onclick = function(){ 

    var lightbox = document.getElementById("lightbox"), 
     dimmer = document.createElement("div"); 

    dimmer.style.width = window.innerWidth + 'px'; 
    dimmer.style.height = window.innerHeight + 'px'; 
    dimmer.className = 'dimmer'; 

    dimmer.onclick = function(){ 
     document.body.removeChild(this); 
     lightbox.style.visibility = 'hidden'; 
    } 

    document.body.appendChild(dimmer); 

    lightbox.style.visibility = 'visible'; 
    lightbox.style.top = window.innerHeight/2 - 50 + 'px'; 
    lightbox.style.left = window.innerWidth/2 - 100 + 'px'; 
    return false; 
} 
</script> 
</HEAD> 

<body> 

    <div id="lightbox">Testing out the lightbox</div> 
<a href="#" id="opener">Click me</a> 
</body> 


</HTML>

источник

2015-09-14 dan

скрипка работает? Не уверен, что вопрос – nycynik

Проверьте консоль. В последнее время я испытал, что JS не работает из-за расширений chrome. Сообщите нам, что говорит ваша консоль. –

Можете ли вы также включить CSS, поэтому мы знаем, как ваш скрытый лайтбокс изначально. – nycynik

Пожалуйста с друзьями «Проверить элемент», как инструменты для разработчиков. В консоли, он говаривал ваша ошибка

Uncaught TypeError: Cannot set property 'onclick' of null

Это потому, что вы вызываете document.getElementById("opener"); в вашем в то время как ваш нож элемент в организме.

Ваш скрипт будет загружен при загрузке документа перед тегом body.

Удостоверьтесь, что у вас есть свой сценарий после того, где находится ваш opener.

<!DOCTYPE html> 
<html> 
<head> 
    <!-- you can replace with your link to css file --> 
    <style> 
     #lightbox{ 
      visibility:hidden; 
      position:absolute; 
      background:red; 
      border:2px solid #3c3c3c; 
      color:white; 
      z-index:100; 
      width: 200px; 
      height:100px; 
      padding:20px; 
     } 

     .dimmer{ 
      background: #000; 
      position: absolute; 
      opacity: .5; 
      top: 0; 
      z-index:99; 
     } 
    </style> 
</head> 

<body> 
    <div id="lightbox">Testing out the lightbox</div> 
    <a href="#" id="opener">Click me</a> 

    <!-- script is added after id="opener" is defined --> 
    <script> 
    var opener = document.getElementById("opener"); 

    opener.onclick = function(){ 

    var lightbox = document.getElementById("lightbox"), 
     dimmer = document.createElement("div"); 

    dimmer.style.width = window.innerWidth + 'px'; 
    dimmer.style.height = window.innerHeight + 'px'; 
    dimmer.className = 'dimmer'; 

    dimmer.onclick = function(){ 
     document.body.removeChild(this); 
     lightbox.style.visibility = 'hidden'; 
    } 

    document.body.appendChild(dimmer); 

    lightbox.style.visibility = 'visible'; 
    lightbox.style.top = window.innerHeight/2 - 50 + 'px'; 
    lightbox.style.left = window.innerWidth/2 - 100 + 'px'; 
    return false; 
    } 
</script> 

</body> 


</html>

В общем, я определить любой JavaScript в конце <body> тега, потому что это одна из стратегий оптимизации для повышения начальной скорости загрузки веб-сайта.

источник

2015-09-14 18:57:12

Нет проблем! Добро пожаловать в веб-разработку! :) –

Ваш код что-то в вашем коде, что делает jsFiddle отсутствует. По умолчанию он переносит код в окне JavaScript в обработчик события window.onload. Поскольку ваш код этого не делает, ваш JavaScript работает до того, как будет создана ссылка на открыватель, поэтому обработчик кликов не будет применяться. Чтобы исправить это, поместите JavaScript в обработчике window.onload вроде jsFiddle делает для вас:

window.addEventListener('load', function() { 
    var opener = document.getElementById("opener"); 

    opener.onclick = function(){ 

    var lightbox = document.getElementById("lightbox"), 
     dimmer = document.createElement("div"); 

    dimmer.style.width = window.innerWidth + 'px'; 
    dimmer.style.height = window.innerHeight + 'px'; 
    dimmer.className = 'dimmer'; 

    dimmer.onclick = function(){ 
     document.body.removeChild(this); 
     lightbox.style.visibility = 'hidden'; 
    } 

    document.body.appendChild(dimmer); 

    lightbox.style.visibility = 'visible'; 
    lightbox.style.top = window.innerHeight/2 - 50 + 'px'; 
    lightbox.style.left = window.innerWidth/2 - 100 + 'px'; 
    return false; 
    } 
}

источник

2015-09-14 18:41:04 BurningLights

все еще ничего ... Может быть, потому, что html является частью набора фреймов? – dan

Pop-up box not openning

ответ

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