modal을 이용한 팝업창 자동 닫기도 가능 > 그누보드5 팁자료실

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

그누보드5 팁자료실

modal을 이용한 팝업창 자동 닫기도 가능 정보

modal을 이용한 팝업창 자동 닫기도 가능

본문

적당히 css 수정해서 쓰심됩니다. 닫기버튼은 font aswome에 탑제된걸 이용했습니다.    

 

index.php 부분에 적당한 부분에 넣어주세요


    <!-- 모달 부분 -->
    <div id="myModal" class="modal">
 
      <!-- 모달 닫기버튼 -->
      <div class="modal-content">
          <span class="pop_bt" style="font-size: 25px; float:right;"  onClick="close_pop();">
                     <i class="fa fa-window-close" aria-hidden="true"></i>
                </span>
                
            모달 내용부분
      </div>
 
    </div>
       
 
 
      <!-- 모달 자바스크립트 -->
  <script type="text/javascript">
        //모달을 페이지 로딩시 자동으로 띄워줌
        jQuery(document).ready(function() {
                $('#myModal').show();
        });
        //닫기버튼을 누르면 모달을 숨김
         function close_pop(flag) {
             $('#myModal').hide();
        };
        //모달을 시간이 지나면 자동으로 숨김 1000초가 1초
   
        setTimeout(function() { $('#myModal').hide();}, 6000);
      </script>
      

      
      CSS부분입니다. default.css 또는 mobile.css에 적당한 부분에 넣으심 됩니다.

      CSS부분입니다. default.css 또는 mobile.css에 적당한 부분에 넣으심 됩니다.
      /* 모달 */
 .modal {
            display: none; 
            position: fixed; 
            z-index: 1000; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
        }
    
        .modal-content {
            background-color: #fefefe;
            margin: 8% auto; 
            padding: 20px;
            border: 1px solid #888;
            width: 30%;                         
        }
추천
2

댓글 4개

전체 2,431 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT