길

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

· 2020-01-22 (수) 23:29:54 · 11042 · 4

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

 

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

[code]

    <!-- 모달 부분 -->
    <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>
      [/code]
      
      CSS부분입니다. default.css 또는 mobile.css에 적당한 부분에 넣으심 됩니다.

[code]

      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%;                         
        }

[/code]

|

댓글 4개

감사합니다.
2021-02-08 (월) 14:49:47
감사합니다.
소스 공개 감사합니다.

"오늘 하루만 보기" 이런 기능 추가 하고 싶은데요. 도와 주실 수 있으신가요?
감사합니다!
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
20-02-03 조회 6,207
20-02-02 조회 7,620
20-02-01 조회 7,387
20-01-29 조회 8,261
20-01-28 조회 6,080
20-01-27 조회 4,890
20-01-27 조회 5,642
20-01-23 조회 5,538
20-01-22 조회 1.1만
20-01-22 조회 5,794
20-01-20 조회 5,630
20-01-19 조회 5,438
20-01-16 조회 5,873
20-01-16 조회 8,668
20-01-16 조회 7,789
20-01-14 조회 7,313
20-01-14 조회 1만
20-01-12 조회 6,185
20-01-12 조회 6,487
20-01-11 조회 5,306
20-01-10 조회 7,508
20-01-09 조회 6,135
20-01-09 조회 6,388
20-01-09 조회 5,588
20-01-09 조회 5,640
20-01-06 조회 5,972
20-01-06 조회 7,762
20-01-06 조회 9,793
20-01-05 조회 7,457
20-01-05 조회 7,076