-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
아무리 버튼을 눌러도 모달이 뜨지를 않네요 ㅠㅠ
21.07.22 11:09 작성 조회수 106
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);
}
반응형 웹사이트 포트폴리오(Architecture Agency)
서브페이지 링크하기(Modal Iframe Jquery Plugin) #02(모달 아이프레임 플러그인 )
강의실 바로가기
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2021.07.22
분명 호버를 하거나 클릭을 하면 저렇게 하단에 표시는 되는데 직접적으로 모달이 뜨질 않네요 ㅠㅠㅠ 다른 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> 사이 코드를 보여주세요.
oo !
질문자2021.07.22
선생님 그리고
$(".contact_btn").click(function () {
$(".c_modal").slideToggle(500);
});
html 파일 안만들고 div 해봤는데 토글로 안열리네요 ㅎㄷ
왜그런걸까요???? 이상한건 개발자모드로 들어가면 열리네요....
*그래서 액티브한걸 없애니 슬라이드토글이 개발자모드 밖에서도 먹힙니다
.contact_btn:active{
transform: scale(0);
}
모달로 해서는 아예안뜨구요...
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>
답변 1