드롭다운 메뉴 적용관련 질문입니다. 채택완료
침노하는자
6년 전
조회 2,385
드롭다운 메뉴를 만들고, 창을 띄워 적용시켜 보았습니다.
http://www.twolive.com/main1.php">http://www.twolive.com/main1.php
잘 적용이 되었습니다. 그런데 문제는 저 창을 본 메인화면 index.php에 적용시키면 창은 뜨는데 드롭다운메뉴가 적용이 안됩니다.
http://www.twolive.com/index2.php">http://www.twolive.com/index2.php
이 문제때문에 이것저것 많은 시간을 투자하였지만 해결방법을 모르겠습니다. ㅠㅠ
main1.php 소스코드
</p>
<p><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="book/css/style.css">
</head>
<body></p>
<p><h2>아래 버튼 클릭하세요</h2></p>
<p><div>
<a href = "javascript:void(0)" onclick = "document.getElementById('myModal').style.display='block';"><img src="images/mbg.png"></a>
</div></p>
<p>
<!-- The Modal -->
<div id="myModal" class="modal"></p>
<p> <!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close"><a href = "javascript:void(0)" onclick = "document.getElementById('myModal').style.display='none';">×</a></span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<object width="100%" height="100%" data="<a href="<a href="http://www.twolive.com/book/main.html"></object" target="_blank" rel="noopener noreferrer">http://www.twolive.com/book/main.html"></object</a>"><a href="http://www.twolive.com/book/main.html"></object" target="_blank" rel="noopener noreferrer">http://www.twolive.com/book/main.html"></object</a></a>>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div></p>
<p></div></p>
<p><script>
// Get the modal
var modal = document.getElementById('myModal');</p>
<p>// Get the button that opens the modal
var btn = document.getElementById("myBtn");</p>
<p>// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];</p>
<p>// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}</p>
<p>// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}</p>
<p>// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script></p>
<p></body>
</html></p>
<p>
index.php 소스코드
</p>
<p><?php
include_once('./_common.php');</p>
<p>define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가</p>
<p>if(defined('G5_THEME_PATH')) {
require_once(G5_THEME_PATH.'/index2.php');
return;
}</p>
<p>if (G5_IS_MOBILE) {
include_once(G5_MOBILE_PATH.'/index2.php');
return;
}</p>
<p>include_once(G5_PATH.'/head2.php');
?></p>
<p><!-- section 시작 { -->
<div>
<h2>아래 버튼 클릭하세요</h2>
<a href = "javascript:void(0)" onclick = "document.getElementById('myModal').style.display='block';"><img src="images/mbg.png"></a>
</div>
<!-- The Modal -->
<div id="myModal" class="modal"></p>
<p> <!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close"><a href = "javascript:void(0)" onclick = "document.getElementById('myModal').style.display='none';">×</a></span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<object width="100%" height="100%" data="book/main.html"></object>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div></p>
<p></div></p>
<p><script>
// Get the modal
var modal = document.getElementById('myModal');</p>
<p>// Get the button that opens the modal
var btn = document.getElementById("myBtn");</p>
<p>// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];</p>
<p>// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}</p>
<p>// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}</p>
<p>// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!-- } section 끝 --></p>
<p><?php
include_once(G5_PATH.'/tail2.php');
?></p>
<p>
style.css
</p>
<p>@charset "utf-8";
/* CSS Document */</p>
<p>/* Fixed sidenav, full height */
.sidenav {
height: auto;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ede7dc;
overflow-x: hidden;
padding-top: 20px;
padding-bottom: 20px;
}</p>
<p>/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 17px;
color: #645637;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
line-height: 170%;
cursor: pointer;
outline: none;
}</p>
<p>/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #064579;
}</p>
<p>/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}</p>
<p>/* Add an active class to the active dropdown button */
.active {
background-color: #866c43;
color: white;
}</p>
<p>/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #c2ab87;
padding-left: 5px;
}</p>
<p>.dropdown-container a {
font-size: 14px;
line-height: 140%;
color: white;
} </p>
<p>/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}</p>
<p>/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}</p>
<p>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
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 */
}</p>
<p>/* Modal Content */
.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);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}</p>
<p>/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}</p>
<p>@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}</p>
<p>/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}</p>
<p>.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}</p>
<p>.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}</p>
<p>.modal-body {
padding: 2px 16px;
height: 700px;
}</p>
<p>.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}</p>
<p>
해결책좀 부탁드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
�
침노하는자
6년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
레이어 팝업은 다 뜨고요. 레이어 팝업창에서 드롭다운이 적용이 안되요. 방금 확인해보니
크롬에서는 정상적으로 팝업창에서 드롭다운 적용되네요.
익스플로러에서는 팝업창에서 드롭다운이 적용이 안되네요..ㅠㅠ