크롬80버전 결제 이슈, 영카트5 주요패치 확인!

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

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

그누보드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

댓글 전체

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

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT