내 코드에 모달을 포함하려고합니다. 버튼/href를 클릭하면 다른 파일이 모달에 표시됩니다. 간단히 코드를 here에서 가져 왔습니다.모달은 대부분 즉시 종료됩니다.
이제 애니메이션을로드 한 후 (또는 몇 밀리 초 후) 모달을 닫습니다. 이상한 부분은 버튼을 몇 번 누르면 가끔 작동하고 파일이 표시된다는 것입니다.
// 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 = "flex";
};
// 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";
}
};
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Modal Footer */
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div class="nav1">
<a href="index.php?page=users&action=login" id="myBtn">Login</a>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
Modal Body
<?php
if (isset($_GET["page"])) {
switch ($_GET["page"]) {
case "post":
include "./system/post/index.php";
break;
case "users":
include "./system/users/index.php";
break;
default:
include "start.php";
break;
}
}
else
{
include "start.php";
}
?>
</div>
<div class="modal-footer">
Modal Footer
</div>
</div>
</div>
<script src="./system/style/modal.js"></script>
그래서 문제를 조금이라도 녹음하면 he 도움이 될 것입니다. (내가 엿 같은 것을 알 수 있습니다 ^^) 그래서 3 번 빨리 버튼을 누르면 어떻게 든 알게되었습니다. https://drive.google. co.kr/file/d/0B4ilpgGKqcEZbzBZaHN3QlhLU1k /보기 – Niklas