Twitter 부트스트랩을 사용하여 알림을 자동으로 닫는 방법

Twitter 부트스트랩을 사용하여 알림을 자동으로 닫는 방법

저는 트위터의 부트스트랩 CSS 프레임워크를 사용하고 있습니다.사용자에게 보내는 일부 메시지에 대해 경고 Javascript JS 및 CSS를 사용하여 표시합니다.

관심 있는 사람들을 위해, 여기에서 찾을 수 있습니다: http://getbootstrap.com/javascript/ #http://▁for #http://#

문제는 이것입니다. 사용자에게 경고를 표시한 후 일정 시간이 지나면 경고가 사라졌으면 합니다.트위터의 문서와 제가 살펴본 코드에 따르면 이것은 구워지지 않은 것 같습니다.

• 제 첫 번째 질문은 이것이 부트스트랩에 구워지지 않았다는 확인 요청입니다.
• 둘째, 어떻게 하면 이런 행동을 할 수 있을까요?

전화를 걸면 이 작업을 수행할 수 있습니다.다음은 경고가 표시된 후 2초(또는 2000밀리초)에 자동으로 닫히는 예입니다.

$(".alert-message").alert();
window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);

만약 당신이 그것을 멋진 기능으로 포장하고 싶다면, 당신은 이것을 할 수 있습니다.

function createAutoClosingAlert(selector, delay) {
   var alert = $(selector).alert();
   window.setTimeout(function() { alert.alert('close') }, delay);
}

그럼 그렇게 사용할 수도 있고요...

createAutoClosingAlert(".alert-message", 2000);

나는 이것을 성취할 수 있는 더 우아한 방법들이 있다고 확신합니다.

나는 그것을 경계하면서 작동시킬 수 없었습니다.('닫힘') 둘 중 하나입니다.

하지만 저는 이것을 사용하고 있고 그것은 효과가 있습니다!경고는 5초 후에 사라지며 사라지면 아래의 내용이 자연스러운 위치로 이동합니다.

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);

팝업 경고와 페이딩 경고를 처리하려고 할 때 동일한 문제가 발생했습니다.저는 여러 곳을 찾아다녔고 이것이 저의 해결책이라는 것을 알았습니다.'in' 클래스를 추가 및 제거하여 문제가 해결되었습니다.

window.setTimeout(function() { // hide alert message
    $("#alert_message").removeClass('in'); 

}, 5000);

.remove() 및 유사하게 .alert('close') 솔루션을 사용할 때 문서에서 경고가 제거되는 문제가 발생한 것 같아서 동일한 경고 div를 다시 사용할 수 없습니다.이 솔루션은 페이지를 새로 고치지 않고 경고를 재사용할 수 있음을 의미합니다.(Jax를 사용하여 양식을 제출하고 사용자에게 피드백을 제시했습니다.)

    $('#Some_Button_Or_Event_Here').click(function () { // Show alert message
        $('#alert_message').addClass('in'); 
    });

경고에 '닫기' 작업을 사용하는 것은 DOM에서 경고를 제거하고 경고가 여러 번 필요하기 때문에 효과가 없습니다(Ajax로 데이터를 게시하고 모든 게시물에서 사용자에게 메시지를 표시함).그래서 저는 필요할 때마다 경고를 생성하고 타이머를 시작하여 생성된 경고를 종료하는 이 기능을 만들었습니다.알림을 추가할 컨테이너의 ID, 알림 유형('성공', '위험' 등) 및 메시지를 함수에 전달합니다.내 코드는 다음과 같습니다.

function showAlert(containerId, alertType, message) {
    $("#" + containerId).append('<div class="alert alert-' + alertType + '" id="alert' + containerId + '">' + message + '</div>');
    $("#alert" + containerId).alert();
    window.setTimeout(function () { $("#alert" + containerId).alert('close'); }, 2000);
}

커피스크립트 버전은 다음과 같습니다.

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000

위의 각 솔루션으로 인해 경고의 재사용 가능성이 계속 상실되었습니다.제 해결책은 다음과 같습니다.

페이지 로드 시

$("#success-alert").hide();

경고를 표시해야 할 경우

 $("#success-alert").show();
 window.setTimeout(function () {
     $("#success-alert").slideUp(500, function () {
          $("#success-alert").hide();
      });
 }, 5000);

참고로 fadeTo는 불투명도를 0으로 설정하므로 디스플레이가 0이고 불투명도가 0이므로 솔루션에서 제거했습니다.

여기서 다른 스레드에서 답변의 일부를 검토한 후, 다음과 같이 결론을 내렸습니다.

는 라는이름함만니다습들라는 이름의 .showAlert()으로 경보가 표시됩니다.type그리고.closeDealy를 들어, 수 있습니다.danger다음과 같이 5초 후에 자동으로 닫히는 (즉, 부트스트랩의 경고 위험):

showAlert("Warning message", "danger", 5000);

이를 위해 다음 Javascript 함수를 추가합니다.

function showAlert(message, type, closeDelay) {

    if ($("#alerts-container").length == 0) {
        // alerts-container does not exist, add it
        $("body")
            .append( $('<div id="alerts-container" style="position: fixed;
                width: 50%; left: 25%; top: 10%;">') );
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div class="alert alert-' + type + ' fade in">')
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $("#alerts-container").prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}

시간이 흐른 후에 뭔가를 숨길 수 있는 아주 간단한 해결책이 필요했고, 이 방법을 사용할 수 있었습니다.

각도에 따라 다음 작업을 수행할 수 있습니다.

$timeout(self.hideError,2000);

제한 시간에 도달했을 때 호출하는 기능은 다음과 같습니다.

 self.hideError = function(){
   self.HasError = false;
   self.ErrorMessage = '';
};

이제 대화 상자/UI에서 이러한 속성을 사용하여 요소를 숨길 수 있습니다.

지연 및 페이드 포함:

setTimeout(function(){
    $(".alert").each(function(index){
        $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
            $(this).remove();
        });
    });
},2000);

이거 드셔보세요.

$(function () {

 setTimeout(function () {
            if ($(".alert").is(":visible")){
                 //you may add animate.css class for fancy fadeout
                $(".alert").fadeOut("fast");
            }

        }, 3000)

});

언급URL : https://stackoverflow.com/questions/7643308/how-to-automatically-close-alerts-using-twitter-bootstrap