Как вы отделите Javascript для модалов от html?

Я изучаю HTML и CSS с помощью Javascript. В настоящее время я пытаюсь отделить Javascript-код от html-файла для модальных всплывающих функций. Я еще не научился jquery, поэтому, если есть способ решить это без него, мы будем очень благодарны.Как вы отделите Javascript для модалов от html?

Полный код можно найти здесь: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img

HTML код:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="modal.css"> 
    <script type="text/javascript" src="modal.js" ></script> 
</head> 
<body> 
    <h2>Image Modal</h2> 
    <img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"> 

    <!-- The Modal --> 
    <div id="myModal" class="modal"> 
     <span class="close">×</span> 
     <img class="modal-content" id="img01"> 
     <div id="caption"></div> 
    </div> 

</body> 
</html>

код Внешний Javascript:

// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the image and insert it inside the modal - use its "alt" text as a caption 
var img = document.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption"); 
img.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    modalImg.alt = this.alt; 
    captionText.innerHTML = this.alt; 
} 

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

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

выше метод не работает. Когда я нажимаю на изображение, модальное всплывающее окно отсутствует. Я предполагаю, что просто ссылки на скрипт недостаточно, но я недостаточно свободно говорю на этом языке, чтобы решить эту проблему.

источник

2016-07-21 Dobob

вы можете поместить свой тег сценария в тело.

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="modal.css"> 
</head> 
<body> 
    <h2>Image Modal</h2> 
    <img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"> 

    <!-- The Modal --> 
    <div id="myModal" class="modal"> 
     <span class="close">×</span> 
     <img class="modal-content" id="img01"> 
     <div id="caption"></div> 
    </div> 
    <script src="your url"></script> 
</body> 
</html>

источник

2016-07-21 01:55:01 paddy511

Добро пожаловать в SO. Чтобы обеспечить лучший ответ, вам следует описать, почему это решает проблему –

. Импорт браузера js синхронизируется. поэтому, когда вы импортируете свой js-файл, ваш dom html не готов в дереве dom (а не в создании экземпляра). вы не можете получить объект dom в js. – paddy511

Спасибо, что сработало. Поэтому проблема заключалась в том, что я должен поместить скрипт в тело. Почему в этом случае скрипт не работает в ? – Dobob

Вам не нужно связывать его в каком-либо виде. Вложения js достаточно. Но вы допустили ошибку. Страница анализируется сверху вниз. Javascript запускается до того, как html полностью загружен. Итак, такие вещи, как getElementById, не будут работать, потому что в данный момент элемент не существует. Для запуска кода при загрузке страницы выполните следующие действия. Js:

window.onload=function(){ 
//do awesome stuff 
yourelement=document.getElementById("yourelement"); 
}

источник

2016-07-21 01:55:36

Как вы отделите Javascript для модалов от html?

ответ

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