인프런 커뮤니티 질문&답변
작성한 질문수
아무리 버튼을 눌러도 모달이 뜨지를 않네요 ㅠㅠ
작성
·
233
1
분명 호버를 하거나 클릭을 하면 저렇게 하단에 표시는 되는데 직접적으로 모달이 뜨질 않네요 ㅠㅠㅠ 다른 a태그에서는 됩니다 그런데 이것만 그렇네요? active로 toggleclass해봐도 열리지를 않습니다 ㅠㅠㅠㅠ
<a href="modal.html" class="contact_btn" data-featherlight="iframe"
><i class="fas fa-comment-dots"></i>Contact</a
>
<style>
/* contact modal */
body {
background-color: #f5df4dee;
}
.c_modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #555;
border-radius: 10px;
}
.c_modal img {
width: 200px;
height: auto;
}
.c_modal p {
font-size: 1.6rem;
font-weight: bold;
}
.c_modal p span {
font-weight: normal;
}
</style>
</head>
<body>
<!-- contact madal -->
<div class="c_modal">
<img
src="img/me.png"
alt="my face"
data-aos="fade-up"
data-aos-delay="100"
/>
<p>E-mail : <span>....@naver.com</span></p>
<p>phone : <span>010 ..... .....</span></p>
</div>/* contact */
.contact_btn {
position: fixed;
font-size: 1.6rem;
font-weight: 600;
left: 50px;
bottom: 50px;
color: #222;
background-color: #fff;
padding: 0.8em 2em;
border-radius: 30px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
transition: 0.1s;
z-index: 999;
}
.contact_btn i {
color: #000;
margin-right: 0.5em;
transform: rotateY(180deg);
}
.contact_btn:active {
transform: scale(0);
}
퀴즈
55%나 틀려요. 한번 도전해보세요!
웹사이트 내 서브페이지 링크 시, 단순히 새 탭을 여는 것보다 모달 창(레이어 팝업)을 사용하는 주된 이점은 무엇일까요?
웹 페이지 로딩 속도를 빠르게 합니다.
사용자가 현재 페이지에서 벗어나지 않고 콘텐츠를 볼 수 있게 합니다.
검색 엔진 최적화(SEO) 순위를 높입니다.
서버의 데이터베이스 부하를 줄입니다.
답변 1
0
코딩웍스(Coding Works)
지식공유자
분명 호버를 하거나 클릭을 하면 저렇게 하단에 표시는 되는데 직접적으로 모달이 뜨질 않네요 ㅠㅠㅠ 다른 a태그에서는 됩니다 그런데 이것만 그렇네요? active로 toggleclass해봐도 열리지를 않습니다 ㅠㅠㅠㅠ
active로 toggleclass해서 풀스크린 모달을 띄우는게 아니고 featherlight.js로 풀모달을 띄우는건데...
<a href="modal.html" class="contact_btn" data-featherlight="iframe"><i class="fas fa-comment-dots"></i>Contact</a>
이 부분은 문제가 없어요. data-featherlight="iframe" 사용자 속성도 잘 넣으셨구요.
혹시 featherlight.js 링크 문제인 듯 한데 <head>와 </head> 사이 코드를 보여주세요.
선생님 그리고
html 파일 안만들고 div 해봤는데 토글로 안열리네요 ㅎㄷ
왜그런걸까요???? 이상한건 개발자모드로 들어가면 열리네요....
*그래서 액티브한걸 없애니 슬라이드토글이 개발자모드 밖에서도 먹힙니다
모달로 해서는 아예안뜨구요...
head부분은 밑에 달았습니다 ㅠㅠㅠ