javascript modal не работает

Я использую инструмент скобки для изучения javascript. Когда я вижу предварительный просмотр, я вижу кнопку. Однако, хотя я несколько раз нажимаю кнопку и меняю коды, ничего не происходит. Модаль не появляется. Я знаю, что существует так много похожих вопросов о модальном. Я прочитал несколько ответов, но я не мог решить эту проблему. Может кто-нибудь, пожалуйста, дайте мне совет, как я могу решить эту проблему?javascript modal не работает

<!DOCTYPE html > 
<html> 
<head> 

    <link rel="stylesheet" href="modal.css"> 
</head> 
<body> 
    <script type="text/javascript"> 
    // Get the modal 
    var modal = document.getElementById('myModal'); 

    // Get the button that opens the modal 
    var btn = document.getElementById("myBtn"); 

    // Get the <span> element that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 

    // When the user clicks on the button, open the modal 
    btn.onclick = function() { 
    modal.style.display = "block"; 
    } 

    // When the user clicks on <span> (x), close the modal 
    span.onclick = function() { 
    modal.style.display = "none"; 
    } 

    // When the user clicks anywhere outside of the modal, close it 
    window.onclick = function(event) { 
    if (event.target == modal) { 
    modal.style.display = "none"; 
     } 
    } 
    </script> 

    <!-- Trigger/Open The Modal --> 
    <button id="myBtn">Open Modal</button> 

    <!-- The Modal --> 
    <div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">x</span> 
     <p>Some text in the Modal..</p> 
    </div> 
</div>

источник

2016-10-04 camila

Помог ли один из ответов? Или вы все еще застряли? @camila – JeremyS

Вашего Javascript ищет вашу кнопку и модальный, прежде чем они загружены. Вам нужно либо использовать событие onload, документ, готовый с помощью jQuery, либо разместить Javascript после вашего модального html. Я помещаю консольный журнал в ваше событие btn click, чтобы вы знали, что он стреляет, глядя в консоль инструментов разработчика.

<!DOCTYPE html > 
    <html> 
     <head> 
      <link rel="stylesheet" href="modal.css"> 
     </head> 
     <body> 
      <script type="text/javascript"> 
       function modalFun(){ 
        // Get the modal 
        var modal = document.getElementById('myModal'); 

        // Get the button that opens the modal 
        var btn = document.getElementById("myBtn"); 

        // Get the <span> element that closes the modal 
        var span = document.getElementsByClassName("close")[0]; 

        // When the user clicks on the button, open the modal 
        btn.onclick = function() { 
         console.log(modal); 
         modal.style.display = "block"; 
        } 

        // When the user clicks on <span> (x), close the modal 
        span.onclick = function() { 
         modal.style.display = "none"; 
        } 

        // When the user clicks anywhere outside of the modal, close it 
        window.onclick = function(event) { 
         if (event.target == modal) { 
          modal.style.display = "none"; 
         } 
        } 
       } 

       window.onload=modalFun; 
      </script> 
      <!-- Trigger/Open The Modal --> 
      <button id="myBtn">Open Modal</button> 

      <!-- The Modal --> 
      <div id="myModal" class="modal"> 
       <!-- Modal content --> 
       <div class="modal-content"> 
        <span class="close">x</span> 
        <p>Some text in the Modal..</p> 
       </div> 
      </div> 
    </body> 
</html>

источник

2016-10-04 17:03:24 JeremyS

Это работает !!! благодаря!!!! – camila

Отлично! Удачи. – JeremyS

Браузер загружает страницу сверху вниз. Поэтому ваш скрипт работает до того, как элементы html загружаются и не могут их найти.

Решение должно помещать ваш тег <script> перед закрытием тега </body>, но после всех элементов страницы.

Подробнее об этой теме: Where is the best place to put tags in HTML markup?

источник

2016-10-04 16:50:28 aBiscuit

javascript modal не работает

ответ

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