아무리 버튼을 눌러도 모달이 뜨지를 않네요 ㅠㅠ
242
작성한 질문수 19
<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);
}
답변 1
0
분명 호버를 하거나 클릭을 하면 저렇게 하단에 표시는 되는데 직접적으로 모달이 뜨질 않네요 ㅠㅠㅠ 다른 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> 사이 코드를 보여주세요.
0
선생님 그리고
html 파일 안만들고 div 해봤는데 토글로 안열리네요 ㅎㄷ
왜그런걸까요???? 이상한건 개발자모드로 들어가면 열리네요....
*그래서 액티브한걸 없애니 슬라이드토글이 개발자모드 밖에서도 먹힙니다
모달로 해서는 아예안뜨구요...
head부분은 밑에 달았습니다 ㅠㅠㅠ
<head>
<meta charset="UTF-8" />
<meta name="author" content="Ellarose k" />
<meta name="description" content="의 포트폴리오 사이트입니다." />
<meta name="keywords" content="포트폴리오, 웹디," />
<!-- 페이스북 메타 태그 -->
<meta property="og:title" content="의 포트폴리오 사이트" />
<meta property="og:url" content="" />
<meta property="og:image" content="g" />
<meta
property="og:description"
content="의 포트폴리오 사이트입니다."
/>
<!-- 트위터 메타 태그 -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="의 포트폴리오 사이트" />
<meta name="twitter:url" content="/" />
<meta name="twitter:image" content="" />
<meta
name="twitter:description"
content="의 포트폴리오 사이트입니다."
/>
<!--반응형웹선언문-->
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
/>
<!--ios, android 웹앱 아이콘 설정-->
<link rel="apple-touch-icon" sizes="76X76" href="img/p_icon.png" />
<link rel="apple-touch-icon" sizes="120X120" href="img/p_icon.png" />
<link rel="apple-touch-icon" sizes="152X152" href="img/p_icon.png" />
<link rel="shortcut icon" sizes="196X196" href="img/p_icon.png" />
<!-- 아이콘 -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
/>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- CSS basic-->
<link rel="stylesheet" href="css/basic/reset.css" />
<link rel="stylesheet" href="css/basic/aos.css" />
<link rel="stylesheet" href="css/basic/slick.css" />
<link rel="stylesheet" href="css/basic/slick-theme.css" />
<link rel="stylesheet" href="css/basic/featherlight.css" />
<!-- JS basic -->
<script src="js/basic/aos.js"></script>
<script src="js/basic/veloslide/velocity.min.js"></script>
<script src="js/basic/veloslide/velocity.ui.min.js"></script>
<script src="js/basic/veloslide/main.js"></script>
<script src="js/basic/jquery.scrollTo.min.js"></script>
<script src="js/basic/slick.min.js"></script>
<script src="js/basic/featherlight.js"></script>
<!-- CSS/JS custom -->
<link rel="stylesheet" href="css/veloslide.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<script src="js/custom.js"></script>
<title>contact</title>
<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>
full reload 질문
1
196
3
섹션4에 있는 4번째 강의 질문(스크롤링)
1
157
2
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
1
209
1
브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ
1
332
3
css full reload 문제가 발생하여 질문드립니다!
1
327
3
파일 내 index.html에 대한 오류
1
268
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ
1
213
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다
0
219
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!
1
207
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.
1
261
3
크로스브라우징-크롬
1
291
2
섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..
0
260
1
line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다
1
222
1
슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다
1
289
1
이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?
1
265
1
모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역
1
521
2
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
2
235
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
2
316
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2
2
274
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태
2
441
1
포지션 속성 중복과 관련해서
1
227
1
section about에 관련.. 궁금해요
1
260
1
섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련
1
200
2
개발자도구
2
496
6