Inflearn Community Q&A

ellameyrosek

asked

Responsive Website Portfolio (Architecture Agency)

Linking Subpages (Modal Iframe Jquery Plugin) #02 (Modal Iframe Plugin)

아무리 버튼을 눌러도 모달이 뜨지를 않네요 ㅠㅠ

Written on

217

분명 호버를 하거나 클릭을 하면 저렇게 하단에 표시는 되는데 직접적으로 모달이 뜨질 않네요 ㅠㅠㅠ 다른 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);
}

HTML/CSS웹 디자인jquery반응형-웹

Answer 1

codingworks

Instructor

분명 호버를 하거나 클릭을 하면 저렇게 하단에 표시는 되는데 직접적으로 모달이 뜨질 않네요 ㅠㅠㅠ 다른 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> 사이 코드를 보여주세요.

ellameyrosek

Questioner

선생님 그리고

  $(".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>

ellameyrosek

asked

Ask a question