10월 22일 서버 점검 안내 (00:00~06:00)
길

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

· 2020-01-22 (수) 23:29:54 · 12017 · 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개

감사합니다.
감사합니다.
소스 공개 감사합니다.

"오늘 하루만 보기" 이런 기능 추가 하고 싶은데요. 도와 주실 수 있으신가요?
댓글을 작성하시려면 로그인이 필요합니다.
+
제목 글쓴이 날짜 조회
20-02-04 조회 7,365
20-02-03 조회 2만
20-02-03 조회 7,323
20-02-02 조회 8,671
20-02-01 조회 8,501
20-01-29 조회 9,308
20-01-28 조회 7,066
20-01-27 조회 5,880
20-01-27 조회 6,665
20-01-23 조회 6,561
20-01-22 조회 1.2만
20-01-22 조회 6,751
20-01-20 조회 6,664
20-01-19 조회 6,436
20-01-16 조회 6,884
20-01-16 조회 9,665
20-01-16 조회 8,762
20-01-14 조회 8,283
20-01-14 조회 1.1만
20-01-12 조회 7,187
20-01-12 조회 7,450
20-01-11 조회 6,282
20-01-10 조회 8,509
20-01-09 조회 7,122
20-01-09 조회 7,406
20-01-09 조회 6,626
20-01-09 조회 6,580
20-01-06 조회 6,942
20-01-06 조회 8,778
20-01-06 조회 1.1만