Bootstrap 경고 상자(alert)는 팝 업 효과 와 짧 은 디 스 플레이 후 위로 떠 서 사라 지 는 예제 코드 를 실현 합 니 다.

최근 boottstrap 의 경고 상 자 를 사 용 했 을 때 html 의 설명 만 있 는 것 을 발견 하고 팝 업 경고 상자 와 팝 업 이 잠시 표 시 된 후에 떠 서 사라 진 경고 상 자 를 스스로 썼 다.

사용 효과

이동 시 띄 우기 효과 멈 추기

JS 코드 로 바로 올 라 갑 니 다.복사 해서 바로 사용 할 수 있 습 니 다.(bootstrap 의 UI 프레임 을 사용 한 경우)

var commonUtil = {
  /**
   *      
   * @param msg     
   * @param type      （  bootstrap alert）
   */
  alert: function(msg, type){
    if(typeof(type) =="undefined") { //    type    success      
      type = "success";
    }
    //   bootstrap alert  
    var divElement = $("<div></div>").addClass('alert').addClass('alert-'+type).addClass('alert-dismissible').addClass('col-md-4').addClass('col-md-offset-4');
    divElement.css({ //         
      "position": "absolute",
      "top": "80px"
    });
    divElement.text(msg); //         
    //            
    var closeBtn = $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>');
    $(divElement).append(closeBtn);
    //          
    $('body').append(divElement);
    return divElement;
  },
  
  /**
   *              
   * @param msg     
   * @param type      
   */
  message: function(msg, type) {
    var divElement = commonUtil.alert(msg, type); //   Alert   
    var isIn = false; //          
    
    divElement.on({ //  setTimeout                
    　　mouseover : function(){isIn = true;},
    　　mouseout : function(){isIn = false;}
    });

    //          
    setTimeout(function() {
      var IntervalMS = 20; //          
      var floatSpace = 60; //      (px)
      var nowTop = divElement.offset().top; //        top 
      var stopTop = nowTop - floatSpace;  //       top 
      divElement.fadeOut(IntervalMS * floatSpace); //       
      
      var upFloat = setInterval(function(){ //     
        if (nowTop >= stopTop) { //        top           
          divElement.css({"top": nowTop--}); //     top  1px
        } else {
          clearInterval(upFloat); //     
          divElement.remove();  //     
        }
      }, IntervalMS);

      if (isIn) { //      setTimeout           ，     
        clearInterval(upFloat);
        divElement.stop();
      }
      
      divElement.hover(function() { //               ，    
        clearInterval(upFloat);
        divElement.stop();
      },function() {
        divElement.fadeOut(IntervalMS * (nowTop - stopTop)); //               ：    *        
        upFloat = setInterval(function(){ //     
          if (nowTop >= stopTop) {
            divElement.css({"top": nowTop--});
          } else {
            clearInterval(upFloat); //     
            divElement.remove();  //     
          }
        }, IntervalMS);
      });
    }, 1500);
  }
}

호출 부분

function login() {
  $.ajax({
    url: "/apis/login/session",
    data: $('#loginForm').serialize(),
    dataType:"json",
    contentType: "application/json",
    success: function(result) {
      commonUtil.message(result.message); //     commonUtil   message  
    }
  });
}

총결산
부 트 스 트랩 경고 상자(alert)의 팝 업 효과 와 짧 은 디 스 플레이 후 띄 우기 사라 짐 에 관 한 글 을 소개 합 니 다.더 많은 부 트 스 트랩 경고 상자(alert)내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!