간단한 MVC 애플리케이션에서 팝업 메뉴를 열고 닫는 짧은 스크립트가 있습니다.링크 된 자바 스크립트 파일에서 실행하는 모달 팝업 스크립트 받기
스크립트를 자신의 .js 파일에 넣고 cshtml 파일에 링크하면 작동하지 않습니다.
다음<button id="modal">Advanced Filters</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</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>
작동이 중지됩니다. 버튼은 아무 것도하지 않습니다. 인텔리 센스는 "~/..."을 입력 할 때 인텔리 센스가 탐색하고 선택할 수 있기 때문에 파일을 찾는 것입니다.
무엇이 누락 되었습니까? 스크립트를 다른 파일에 링크 할 때 작동하려면 스크립트를 변경해야합니까?