[jQuery] 클릭 시 모달,팝업 띄우기 / 메뉴 팝업창 만들기

#jQuery #모달 #팝업 #견적문의

 

안녕하세요.

GI-1의 개발일기 입니다.

 

흔히 모달,팝업은 쉽게 띄울 수 있습니다.

이번에는 카페의 온라인 견적문의 할 때 필요한 메뉴 팝업창을 만들어 보겠습니다.

 

1. HTML

 

[견적담기 버튼]

<ul class="esti_menu_line clearfix">
  <li class="esti_menu_left">
    <div class="esti_menu_img">
      <img src="이미지경로" alt="">
      <!-- 이 때 이미지는 팝업창에 나올 수 있을 정도로 큰 이미지여야 합니다.  -->
    </div>
    <div class="esti_menu_txt">
      <h3>아메리카노 (HOT / ICE)</h3>
      <p>3,000원</p>
    </div>
  </li>
  <li class="esti_menu_check">
    <button type="button" class='esti_menu_checkBtn' onclick="menuModal(this);">
      <span>견적담기</span>
    </button>
  </li>
</ul>

 

[팝업]

 

<div class="menu_select_modal menu_select_modal1">
  <div class="menu_select_modal_bg"></div>
  <div class="menu_select_modal_box">
    <div class="menu_select_modal_closeBtn">×</div>
    <div class="menu_select_img">
      <img src="" alt="">
    </div>
    <div class="menu_select_txt">
      <h3></h3>

      <p></p>
    </div>
  </div>
</div>

 

 

 

2. script

 

function menuModal(e){
    var ModalMenuImg = $(e).parent(".esti_menu_check").siblings(".esti_menu_left").find("img").attr("src");
// 메뉴 이미지 src를 가져옴
    var ModalMenuTxt = $(e).parent(".esti_menu_check").siblings(".esti_menu_left").find("h3").text();
// 메뉴명을 가져옴
    var ModalPriceTxt = $(e).parent(".esti_menu_check").siblings(".esti_menu_left").find("p").text();
// 메뉴 가격을 가져옴

    $(".menu_select_img img").attr("src", ModalMenuImg);
    $(".menu_select_txt h3").text(ModalMenuTxt);
    $(".menu_select_total p").text(ModalPriceTxt);
    $(".menu_select_modal1").show();

 

//모달에 메뉴 관련 값 삽입 후 노출
  }

 

 

//모달 끄기

 

  $(".menu_select_modal_bg , .menu_select_modal_closeBtn").click(function(){
    $(".menu_select_modal1").hide();
  });
  $(".menu_select_modal_bg2 , .menu_select_modal_closeBtn2").click(function(){
    $(".menu_select_modal2").hide();
  });