zoukankan      html  css  js  c++  java
  • Modal框弹出后,2s自动消失

    1、html代码(bootstrap组件)
    <!--modal提示信息-->
    <div class="modal fade" id="showModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <i class="fa fa-info-circle" style="color:#337ab7;" aria-hidden="true"></i><span class="modal-title" id="modalTitle">&nbsp;提示信息</span>
    </div>
    <div class="modal-body">
    <span id="showMsg"></span>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </div>
    </div>
    </div>
    2、modal出现时,伴随这有如下变化:
      (1)body上会多出一个modal-open的class;
      (2)页面底部会多出一个class为modal-backdrop的div;
      (3)modal自身有一个动画效果,即class = 'fade in';
      若想自动让其消失,且背景暗色也消失并带有淡出的动画效果,可以参考以下方式:
    function hideModal(){
     $('#showModal').removeClass('in').addClass('out');
    $('.modal-backdrop').remove();
    $('body').removeClass('modal-open');
    }

    setTimeout(hideModal,2000);



  • 相关阅读:
    Codeforces Round #601 (Div. 2)
    A. A Serial Killer
    B. Sherlock and his girlfriend
    Codeforces Round #600 (Div. 2)
    Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2) C. Magic Grid
    7213:垃圾炸弹
    2011
    Educational Codeforces Round 46 (Rated for Div. 2)
    Stall Reservations
    Pots
  • 原文地址:https://www.cnblogs.com/wuting/p/8677768.html
Copyright © 2011-2022 走看看