링크 된 자바 스크립트 파일에서 실행하는 모달 팝업 스크립트 받기

간단한 MVC 애플리케이션에서 팝업 메뉴를 열고 닫는 짧은 스크립트가 있습니다.링크 된 자바 스크립트 파일에서 실행하는 모달 팝업 스크립트 받기

스크립트를 자신의 .js 파일에 넣고 cshtml 파일에 링크하면 작동하지 않습니다.

<button id="modal">Advanced Filters</button> 
    <div id="myModal" class="modal"> 
     <div class="modal-content"> 
      <span class="close">&times;</span> 
      <div class="mCheckboxes"> 
       <input type="checkbox" name="moreFilters" value="filter4" />Filter 4<br /> 
       <input type="checkbox" name="moreFilters" value="filter5" />Filter 5<br /> 
       <input type="checkbox" name="moreFilters" value="filter6" />Filter 6<br /> 
       <br /> 
      </div> 
     </div> 
    </div>

는 자바 스크립트입니다 : 여기

는 HTML의

<script type="text/javascript"> 
// Get the modal 
var modal = document.getElementById('myModal'); 

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

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

// When the user clicks 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>

난 그냥 HTML의 하단에있는 스크립트를 넣을 때 잘 작동 파일을 원하는대로 버튼 results in the pop-up을 클릭 (그리고 적절하게 닫습니다.)

그러나 스크립트를 자신의 파일로 옮기고 HTML 파일의 머리 부분에 다음 링크를 추가하십시오.

<script type="text/javascript" src="~/Scripts/Main.js"></script>

작동이 중지됩니다. 버튼은 아무 것도하지 않습니다. 인텔리 센스는 "~/..."을 입력 할 때 인텔리 센스가 탐색하고 선택할 수 있기 때문에 파일을 찾는 것입니다.

무엇이 누락 되었습니까? 스크립트를 다른 파일에 링크 할 때 작동하려면 스크립트를 변경해야합니까?

출처

2017-12-30 user3776749

.js 파일 링크에 'async'옵션을 추가해야했습니다. 그렇지 않으면 Javascript가 실행되지 않습니다.

<script type="text/javascript" src="~/Scripts/Main.js" async></script>

출처

2017-12-31 04:51:17 user3776749

링크 된 자바 스크립트 파일에서 실행하는 모달 팝업 스크립트 받기

답변

관련 문제