테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

버튼별로 modal 나타나는 창을 다르게 하고싶습니다.. 채택완료

arkk 3년 전 조회 3,109
답변 1
목록

버튼별로 modal 창을 다르게 하고 싶은데 잘 안되네요..ㅜㅜ

 

3개로 나눠서 각 클릭마다 modal 창을 다르게 띄우고 싶은데.. 인터넷에서 찾아봤을 때 긁어와도 여러개가 안되고

 

버튼도 따로 css가 있어서 그런지 잘 안되는거 같습니다..

 

소스보고 혹시 어떤 부분이 잘못되었는지 조언 부탁드립니다

 

<style>
/* 팝업 외 어두운 효과 */
    .background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 9999;
 
        /* 숨기기 */
        z-index: -1;
        opacity: 0;
      }
 
    .show1 {
        opacity: 1;
        z-index: 9999;
        transition: all 0.5s;
      }
 
    .window {
        position: relative;
        width: 100%;
        height: 100%;
      }
 
    .popup {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
 
        /* 임시 지정 */
        width: 100px;
        height: 100px;
 
        /* 초기에 약간 아래에 배치 */
        transform: translate(-50%, -40%);
      }
 
    .show1 .popup {
        transform: translate(-50%, -50%);
        transition: all 0.5s;
      }
style>
 
 

 

<div class="right-container1">
    <button id="show" class="right-container-button1"><span class="short-text1">
    <img src=" echo G5_THEME_IMG_URL?>/side/c1.gif" alt="aaa">
          span> <span class="long-text1" style="">aaaspan>
      button>
div>
 
<div class="right-container2">
      <button id="show2" class="right-container-button2"><span class="short-text2">
      <img src=" echo G5_THEME_IMG_URL?>/side/c2.gif" alt="bbb">
          span> <span class="long-text2" style="">bbbspan>
      button>
div>
 
<div class="right-container3">
      <button id="show3" class="right-container-button3"><span class="short-text3">
      <img src=" echo G5_THEME_IMG_URL?>/side/c3.gif" alt="ccc">a>
          span> <span class="long-text3" style="">cccspan>
      button>
div>
 
 
 
<script>
function show() {
        document.querySelector(".background").className = "background show1";
      }
      function close() {
        document.querySelector(".background").className = "background";
      }
 
function show2() {
        document.querySelector(".background").className = "background show";
      }
      function close() {
        document.querySelector(".background").className = "background";
      }
      document.querySelector("#show").addEventListener("click", show);
      document.querySelector("#close").addEventListener("click", close);
 
function show3() {
        document.querySelector(".background").className = "background show";
      }
      function close() {
        document.querySelector(".background").className = "background";
      }
 
      document.querySelector("#show").addEventListener("click", show);
      document.querySelector("#close").addEventListener("click", close);
script>
#modal #css #팝업
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
비

제이쿼리 ui에 있기도 하고 아니면 디자인 이쁜거 하실거면 부트스트랩에 보면 모달창 있어요

부트스트랩 안쓰고 하실거면 jquery ui에서 제공되는 거쓰시면되요

여기서 다이얼로그 옵션에 클래스 추가하면 css 수정 가능하구요 

https://webisfree.com/2016-07-01/%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%ACui-dialog-%EB%AA%A8%EB%8B%AC-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인