테스트 사이트 - 개발 중인 베타 버전입니다

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

· 5년 전 · 8892 · 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개

감사합니다.
4년 전
감사합니다.
4년 전
소스 공개 감사합니다.

"오늘 하루만 보기" 이런 기능 추가 하고 싶은데요. 도와 주실 수 있으신가요?
감사합니다!

게시글 목록

번호 제목
24318
24317
24315
24309
24294
24293
24277
24262
24260
24253
24251
24236
24233
24228
24226
24221
24214
24203
24201
24199
24196
24195
24194
24192
24191
24187
24185
24183
24172
24168