드롭다운 메뉴 적용관련 질문입니다.
본문
드롭다운 메뉴를 만들고, 창을 띄워 적용시켜 보았습니다.
http://www.twolive.com/main1.php
잘 적용이 되었습니다. 그런데 문제는 저 창을 본 메인화면 index.php에 적용시키면 창은 뜨는데 드롭다운메뉴가 적용이 안됩니다.
http://www.twolive.com/index2.php
이 문제때문에 이것저것 많은 시간을 투자하였지만 해결방법을 모르겠습니다. ㅠㅠ
main1.php 소스코드
<!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>
<h2>아래 버튼 클릭하세요</h2>
<div>
<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">
<!-- 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="http://www.twolive.com/book/main.html"></object>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// 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 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>
</body>
</html>
index.php 소스코드
<?php
include_once('./_common.php');
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if(defined('G5_THEME_PATH')) {
require_once(G5_THEME_PATH.'/index2.php');
return;
}
if (G5_IS_MOBILE) {
include_once(G5_MOBILE_PATH.'/index2.php');
return;
}
include_once(G5_PATH.'/head2.php');
?>
<!-- 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">
<!-- 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>
</div>
<script>
// 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 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>
<!-- } section 끝 -->
<?php
include_once(G5_PATH.'/tail2.php');
?>
style.css
@charset "utf-8";
/* CSS Document */
/* 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;
}
/* 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;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #064579;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: #866c43;
color: white;
}
/* 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;
}
.dropdown-container a {
font-size: 14px;
line-height: 140%;
color: white;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* 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 */
}
/* 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
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
height: 700px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
해결책좀 부탁드립니다.
답변 2
작성해주신 링크 둘다 클릭해서 드롭다운 버튼 클릭시 정상적으로 레이어 팝업뜨던데요??
브라우저는 크롬입니다.
답변 감사합니다.^^
레이어 팝업은 다 뜨고요. 레이어 팝업창에서 드롭다운이 적용이 안되요. 방금 확인해보니
크롬에서는 정상적으로 팝업창에서 드롭다운 적용되네요.
익스플로러에서는 팝업창에서 드롭다운이 적용이 안되네요..ㅠㅠ
크롬에서 둘다 정상적으로 팝업창에서 드롭다운 메뉴가 적용되는걸로 힌트를 얻어 해결했습니다.
메타 태그가 문제였습니다.
<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">이 태그를 삭제하니
익스플로러에서도 드롭다운메뉴가 적용이 되네요.
답변을 작성하시기 전에 로그인 해주세요.
