Front-End/CSS

[css] 로딩 팝업 원할 때 띄우기

uni2237 2021. 6. 21.
728x90
728x90
  • html : 팝업을 띄울 div에 style="display:none;"  을 적어둠
  • css:  원할 때  $('#loadings').show();  을 해주고 다시  $("#loadings").hide();  로 숨겨준다.

 

# html 코드 

<!-- loading : S 로딩팝업입니다.-->
<div id="loadings" style="display:none;">
    <div class="loading_box">
        <div class="loading_wrap">
            <div class="mid">
                <img src="{% static 'images/common/loading.gif' %}" alt=""> 
                <div class="msg">
                    <strong>Load Table</strong>
                    <p>로딩 팝업입니다. </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- loadings : E -->

 

# css 코드

 if(!li.parent().hasClass("on")){
            
            $('#loadings').show();
            
            setTimeout(function() {
                $("#loadings").hide();
            },400);
        }

 

728x90
728x90

댓글