-
질문 & 답변
카테고리
-
세부 분야
자격증 (디자인)
-
해결 여부
미해결
모달 창은 뜨는데 모달백그라운드 컬러가 안먹히는 이유를 모르겠어요ㅜㅜ
21.11.25 17:41 작성 조회수 848
1
아래 css에서 문제가 있을까요??ㅜㅜ
.modal {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.modal-content {
background-color: #fff;
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%,50%);
width: 350px;
padding: 20px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.541);
display: none;
}
.close-modal {
float: right;
border: 1px solid #000;
display: inline-block;
width: 50px;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
답변을 작성해보세요.
1
코딩웍스(Coding Works)
지식공유자2021.11.25
스크린 샷이 없어서 정확히 확인하기는 좀 어렵지만 아마도 .modal에 z-index를 올려 주시면 될 것 같아요.
z-index: 100;
z-index에는 단위를 넣으시면 안 됩니다.
그리고 display: none; 은 .modal에 주시고 이걸 제이쿼리에서 fadeIn fadeOut 시키세요.
보미
질문자2021.11.26
말씀하신대로 z-index를 해봐도 어떤부분이 문제인지 모르겠어요ㅜㅜ
그리고 한가지 더 문제점이 발견됬는데 new와 gallery부분에 span모양이 잘리구
공지사항탭에 줄바꿈태그 사용이 어렵고 안되네요ㅜㅜ
어느부분이 문제일지 모르겠어서 전체 소스 다 올려봅니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>부여 가을연꽃축제</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="container">
<div class="left">
<header>
<div class="header-logo">
<a href="#"><img src="images/logo-header.png" alt="header logo"></a>
</div>
<div class="navi">
<ul class="menu">
<li>
<a href="#">축제소개</a>
<div class="sub-menu">
<a href="#">초대의 글</a>
<a href="#">축제개요</a>
<a href="#">축제연혁</a>
<a href="#">오시는길</a>
</div>
</li>
<li>
<a href="#">행사안내</a>
<div class="sub-menu">
<a href="#">셔틀버스안내</a>
<a href="#">행사안내</a>
<a href="#">행사일정</a>
<a href="#">소공연장</a>
</div>
</li>
<li>
<a href="#">홍보마당</a>
<div class="sub-menu">
<a href="#">축제소식</a>
<a href="#">보도자로</a>
<a href="#">음식레시피</a>
</div>
</li>
<li>
<a href="#">참여마당</a>
<div class="sub-menu">
<a href="#">참가후기</a>
<a href="#">연꽃갤러리</a>
<a href="#">포토갤러리</a>
</div>
</li>
</ul>
</div>
</header>
</div>
<div class="right">
<div class="slide">
<div>
<a href="#"><img src="images/slide-01.jpg" alt="slide1"></a>
<a href="#"><img src="images/slide-02.jpg" alt="slide2"></a>
<a href="#"><img src="images/slide-03.jpg" alt="slide3"></a>
</div>
</div>
<div class="items">
<div class="news">
<div class="tab-inner">
<div class="btn">
<span>공지사항</span>
</div>
<div class="tab">
<a class="open-modal" href="#"><em>운영위원장 후보자 추천을 받고 있습니다.</em><b>2020.01.09</b></a>
<a href="#"><em>홈커밍데이 진행위원회 결과를 다운로드 받으세요.</em><b>2020.01.07</b></a>
<a href="#"><em>카드결제 무이자 이벤트 한시적 10월 20일까지</em><b>2019.12.31</b></a>
<a href="#"><em>보안강화 시스템 작업 안내 공지 </em><b>2019.12.20</b></a>
<a href="#"><em>부여 가을연꽃축제 10주년 콘서트 축제</em><b>2019.12.20</b></a>
</div>
</div>
</div>
<div class="gallery">
<div class="gallery-inner">
<div class="btn">
<span>갤러리</span>
</div>
<div class="tab">
<a href="#"><img src="images/gallery-01.jpg" alt="gallery1">
<a href="#"><img src="images/gallery-02.jpg" alt="gallery2">
<a href="#"><img src="images/gallery-03.jpg" alt="gallery3">
</a>
</div>
</div>
</div>
<div class="banner">
<a href="#"><img src="images/shortcut-01.jpg" alt="banner"></a>
</div>
</div>
<footer>
<div class="footer-logo">
<a href="#"><img src="images/logo-header.png" alt="footer logo"></a>
</div>
<div class="copyright">
<div>
<a href="#">동문경조사</a>
<a href="#">동문행사일정</a>
<a href="#">사용자매뉴얼</a>
</div>
<div>
상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 |
개인정보관리책임자 : 이주현 부장 <br>
사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니
</div>
</div>
</footer>
</div>
</div>
<div class="modal">
<div class="modal-content">
<h2>부여 가을연꽃축제 팸투어 모집</h2>
<p>예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다.
청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. <br><br>
팸투어는 전액 무료로 진행되며 참가비 없습니다. <br>
이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를
실제로 견학하며 확인해 보실 수 있는 <br> 좋은 기회이니
창업을 희망하는 많은 청년 분들의 관심 <br> 부탁드립니다.
온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다!</p>
<a class="close-modal">닫기</a>
</div>
</div>
<script src="script/jquery-1.12.4.js"></script>
<script src="script/custom2.js"></script>
</body>
</html>
------------------------------------------------------------------------------
@charset "utf-8";
body {
font-size: 15px;
margin: 0;
background-color: #fff;
color: #000;
}
a {
color: #000;
text-decoration: none;
}
.container {
width: 1000px;
/* height: 600px; */
}
.container > div {
float: left;
box-sizing: border-box;
}
.left {
width: 200px;
}
.right {
width: 800px;
}
header {}
header > div {
}
.header-logo {
height: 100px;
}
.navi {
height: 500px;
}
.slide {}
.slide > div {
height: 350px;
padding-bottom: 20px;
}
.items {
overflow: hidden;
}
.items > div {
height: 200px;
float: left;
box-sizing: border-box;
}
.news {
width: 300px;
}
.gallery {
width: 300px;
}
.banner {
width: 200px;
}
footer {
overflow: hidden;
}
footer > div {
height: 100px;
float: left;
box-sizing: border-box;
}
.footer-logo {
width: 200px;
}
.copyright {
width: 600px;
}
.copyright div {
height: 50px;
text-align: center;
}
.copyright div:first-child {
padding-top: 20px;
box-sizing: border-box;
}
.copyright div:first-child a:hover {
font-weight: bold;
color: blue;
}
/* 모듈 외 */
.header-logo,
.footer-logo {
line-height: 125px;
}
/* slide */
.slide {
font-size: 0;
position: relative;
}
.slide > div {}
.slide > div a {
position: absolute;
top: 0;
left: 0;
animation: slide 10s linear infinite;
}
.slide > div a:nth-child(1) {
animation-delay: 0s;
}
.slide > div a:nth-child(2) {
animation-delay: 3.5s;
}
.slide > div a:nth-child(3) {
animation-delay: 7s;
}
@keyframes slide {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
35% {
opacity: 1;
}
40% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* navigation */
.menu {
list-style: none;
padding: 0;
width: 90%;
margin: auto;
}
.menu li {
text-align: center;
}
.menu li > a {
display: block;
border: 1px solid #000;
padding: 5px;
transition: 0.5s;
}
.menu li:hover > a {
background-color: #000;
color: #fff;
}
.sub-menu {
border: 1px solid #000;
display: none;
}
.sub-menu a {
display: block;
padding: 5px;
transition: 0.5s;
}
.sub-menu a:hover {
background-color: #000;
color: #fff;
}
/* news & gallery */
.tab-inner,
.gallery-inner {
width: 95%;
margin: auto;
}
.tab-inner .btn {
}
.tab-inner .btn span,
.gallery-inner .btn span {
display: inline-block;
border: 1px solid #000;
width: 100px;
padding: 5px;
text-align: center;
border-radius: 5px 5px 0 0;
border-bottom: none;
margin: -2px;
background-color: #fff;
}
.tab-inner .tab,
.gallery-inner .tab {
border: 1px solid;
overflow: hidden;
height: 165px;
}
.tab-inner .tab a {
display: block;
padding: 6px;
border-bottom: 1px solid #ccc;
}
.tab-inner .tab a:last-child {
border-bottom: none;
}
.tab-inner .tab a em {
display: block;
white-space: nowrap;
width: 70%;
overflow: hidden;
text-overflow: ellipsis;
font-style: normal;
}
.tab-inner .tab b {
font-weight: normal;
float: right;
width: 30%;
}
.gallery-inner .tab {
display: block;
text-align: center;
}
.gallery-inner img{
width: 80px;
padding: 3px;
padding-top: 40px;
}
/* modal */
.modal {
position: relative;
background-color: #000;
z-index: 100;
display: none;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,50%);
width: 400px;
border-radius: 20px;
background-color: #fff;
padding: 30px;
}
.close-modal {
float: right;
border: 1px solid #000;
display: inline-block;
padding: 3px 5px;
}
----------------------------------------------------------------
// navigation
$('.menu li').mouseenter(function(){
$(this).children('.sub-menu').stop().slideDown()
})
$('.menu li').mouseleave(function(){
$(this).children('.sub-menu').stop().slideUp()
})
// modal
$('.open-modal').click(function(){
$('.modal').fadeIn()
})
$('.close-modal').click(function(){
$('.modal').fadeOut()
})
0
보미
질문자2021.11.27
아 이유를 찾았어요!! 바보같이 margin-bottom:-2px을 줘야하는대 margin만 줬던 거네요ㅜㅜ
피드백 빨리빨리 해주셔서 감사해요!! ㅎㅎ
0
보미
질문자2021.11.27
정말 감사합니다ㅎㅎㅎ
어떻게 해도 해결이 안되었는데 말씀해주신대로 하니 바로 해결되었습니다!!
마지막으로 한가지만 더 여쭤볼게요
위에 소스로 출력해서 보면
이렇게 탭이 어긋나는데 이부분은 왜 이러는건가요??ㅠㅠ
0
코딩웍스(Coding Works)
지식공유자2021.11.26
위의 화면처럼 모달창에 배경이 나오게 하려면 아래처럼 하셔야 합니다.
현재의 경우 z-index를 굳이 주실 필요는 없어요. 모달창 위로 뭔가 올라오면 z-index를 줘서 올려주세요.
잘못된 부분은 position: absolute로 하셔야 하고, width height 값을 100%로 주셔야 합니다.
/* modal */
.modal {
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
/*z-index: 100;*/
width: 100%;
height: 100%;
display: none;
}
그리고 아래 코드도 잘못되었어요. y축 값에 마이너스가 빠져있어요. transform: translate(-50%, -50%);
.modal-content {
transform: translate(-50%,50%);
}
그리고 코드오류가 있는 부분도 체크해주세요.
답변 4