Twitter Bootstrap 알림이 페이드 인 / 아웃 될 수 있습니까?

Bootstrap에서 경고를 처음 보았을 때 모달 창처럼 작동 할 것이라고 생각했습니다. 그러나 그들은 항상 보이는 것처럼 보입니다. 내 앱 위의 레이어에 배치하여 표시 할 수 있지만 기능이 내장되어 있는지 궁금합니다.

감사!

편집, 내가 지금까지 가지고있는 것 :

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

이전에 언급 한 대부분의 답변에 강력히 동의하지 않습니다.

짧은 대답:

"in"클래스를 생략하고 jQuery를 사용하여 추가하여 페이드 인하십시오.

3 초 후에 경고가 사라지는 예제는이 jsfiddle을 참조하십시오. http://jsfiddle.net/QAz2U/3/

긴 대답 :

사실 부트 스트랩은 기본적으로 경고 페이드를 지원하지 않지만 여기에서 대부분의 답변은 JavaScript를 사용하여 요소를 애니메이션 (페이드)하는 jQuery 페이드 함수를 사용합니다. 이것의 가장 큰 장점은 크로스 브라우저 호환성입니다. 단점은 성능입니다 (참조 : CSS3 페이드 애니메이션을 호출하는 jQuery? ).

Bootstrap은 CSS3 전환을 사용하므로 성능이 훨씬 좋습니다. 모바일 장치에 중요한 사항 :

경고를 사라지게하기 위해 CSS를 부트 스트랩합니다.

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

이 공연이 왜 그렇게 중요하다고 생각합니까? 오래된 브라우저와 하드웨어를 사용하는 사람들은 잠재적으로 jQuery.fade ()에서 고르지 못한 전환을받을 수 있습니다. 최신 브라우저를 사용하는 오래된 하드웨어도 마찬가지입니다. CSS3 전환을 사용하면 최신 브라우저를 사용하는 사람들은 오래된 하드웨어를 사용해도 부드러운 애니메이션을 얻을 수 있으며 CSS 전환을 지원하지 않는 오래된 브라우저를 사용하는 사람들은 즉시 요소가 팝업되는 것을 보게 될 것입니다. 이는 고르지 않은 애니메이션보다 더 나은 사용자 경험이라고 생각합니다.

위와 같은 답을 찾기 위해 여기에 왔습니다. 부트 스트랩 경고를 사라지게하는 것입니다. Bootstrap의 코드와 CSS를 파헤친 후 대답은 다소 간단합니다. 경고에 "in"클래스를 추가하지 마십시오. 경고를 페이드 인하 고 싶을 때 jQuery를 사용하여 추가하십시오.

HTML (통지는 NO가없는 에서 클래스!)

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

자바 스크립트 :

function showAlert(){
  $("#myAlert").addClass("in")
}

위의 함수를 호출하면 "in"클래스가 추가되고 CSS3 전환을 사용하여 경고가 사라집니다. :-)

또한 시간 제한을 사용하는 예제는이 jsfiddle을 참조하십시오 (John Lehmann에게 감사합니다!) : http://jsfiddle.net/QAz2U/3/

내가 사용하는 것은 다음과 같습니다.

템플릿에서 경고 영역

<div id="alert-area"></div>

그런 다음 경고를 표시하는 jQuery 함수

function newAlert (type, message) {
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert('success', 'Oh yeah!');

jquery를 사용하여 상자를 페이드 인 할 수 있습니다. 'hide'클래스에 내장 된 부트 스트랩을 사용하여 div 요소에서 display : none을 효과적으로 설정합니다.

<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0">
            <a class="close" href="#">×</a>
            <p><strong>Well done!</strong> You successfully read this alert message.</p>
        </div>

다음과 같이 jquery에서 fadeIn 함수를 사용하십시오.

$("#saveAlert").fadeIn();

또한 fadeIn 함수에 대한 기간을 지정합니다. 예 : $ ( "# saveAlert"). fadeIn (400);

fadeIn 기능 사용에 대한 자세한 내용은 공식 jQuery 문서 사이트 http://api.jquery.com/fadeIn/ 에서 확인할 수 있습니다.

참고로, jquery를 사용하지 않는 경우 자신의 CSS 파일에 'hide'클래스를 추가하거나 div에 추가 할 수 있습니다.

 <div style="display:none;" id="saveAlert">

그런 다음 div가 기본적으로 숨김으로 설정되고 jQuery가 fadeIn 작업을 수행하여 div가 표시되도록합니다.

2.3 이상의 경우 다음을 추가하십시오.

$(".alert").fadeOut(3000 );

부트 스트랩 :

<div class="alert success fade in" data-alert="alert" >
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    // code 
</div>

모든 브라우저에서 작동합니다.

에 hide수업을 추가 합니다 alert-message. 그런 다음 jQuery 스크립트 가져 오기 후에 다음 코드를 넣으십시오.

$(document).ready( function(){
    $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
    window.setTimeout( function(){
        $(".alert-message").slideUp();
    }, 2500);
});

여러 메시지를 처리하려는 경우이 코드는 오름차순으로 메시지를 숨 깁니다.

$(document).ready( function(){
   var hide_delay = 2500;  // starting timeout before first message is hidden
   var hide_next = 800;   // time in mS to wait before hiding next message
   $(".alert-message").slideDown().each( function(index,el) {
      window.setTimeout( function(){
         $(el).slideUp();  // hide the message
      }, hide_delay + hide_next*index);
   });
});

현재 답변 중 어느 것도 나를 위해 일하지 않았습니다. 저는 Bootstrap 3을 사용하고 있습니다.

나는 Rob Vermeer가하는 일을 좋아했고 그의 반응에서 시작했습니다.

페이드 인 및 페이드 아웃 효과를 위해 다음 함수를 작성하고 jQuery를 사용했습니다.

내 페이지의 HTML에 알림을 추가 할 수 있습니다.

        <div class="alert-messages text-center">
        </div>

경고를 표시하고 해제하는 자바 스크립트 함수입니다.

function showAndDismissAlert(type, message) {
    var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';

    // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
    $(".alert-messages").prepend(htmlAlert);

    // Since we are prepending, take the first alert and tell it to fade in and then fade out.
    // Note: if we were appending, then should use last() instead of first()
    $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); });
}

그런 다음 경고를 표시하고 해제하려면 다음과 같은 함수를 호출하면됩니다.

    showAndDismissAlert('success', 'Saved Successfully!');
    showAndDismissAlert('danger', 'Error Encountered');
    showAndDismissAlert('info', 'Message Received');

참고로, 상단에 고정 된 div.alert-messages 스타일을 지정했습니다.

    <style>
    div.alert-messages {
        position: fixed;
        top: 50px;
        left: 25%;
        right: 25%;
        z-index: 7000;
    }
    </style>

내가 부트 스트랩가 사용하는 방식에 동의하지 않습니다 fade in(해당 설명서에서 볼 수 있듯이 - http://v4-alpha.getbootstrap.com/components/alerts/ ), 나의 제안은 클래스 이름을 방지하는 것입니다 fade및in , 및 피하려면 일반적으로 해당 패턴 (현재이 질문에 대한 최고 등급 답변에서 볼 수 있음).

(1) 의미가 잘못되었습니다. 전환은 일시적이지만 클래스 이름은 계속 유지됩니다. 그런데 왜 우리는 우리의 클래스 이름을 지정해야 fade하고 fade in? 그것은해야 faded하고 faded-in개발자가 마크 업을 읽을 때, 그것은 이러한 요소가 있다고 분명 그래서, faded나 faded-in. 부트 스트랩 팀은 이미 멀리하신 hide에 대한 hidden이유,fade 다른가요?

이 개 클래스를 사용하여 (2) fade및 in단일 전환의 클래스 공간을 오염. 그리고, 그것은 그렇게 분명하지 않다 fade과 in서로 연결되어 있습니다. in클래스처럼, 완전히 독립적 인 클래스처럼 보인다 alert및alert-success .

가장 좋은 해결책은 faded요소가 페이드 아웃되었을 때 사용 하고 해당 클래스를faded-in 되었을 때 사용하고 요소가 페이드 인되었을 때로 입니다.

경고가 희미 해짐

그래서 질문에 답하십시오. 경고 마크 업, 스타일, 로직은 다음과 같이 작성해야한다고 생각합니다. 참고 : vanilla javascript를 사용하는 경우 jQuery 로직을 자유롭게 교체하십시오 .

HTML

<div id="saveAlert" class="alert alert-success">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

CSS

.faded {
  opacity: 0;
  transition: opacity 1s;
}

JQuery

$('#saveAlert .close').on('click', function () {

  $("#saveAlert")
    .addClass('faded');

});

물론 예. 프로젝트에서이 간단한 파일을 사용하십시오 : https://gist.github.com/3851727

먼저 다음과 같이 HTML을 추가하십시오.

<div id="messagebox" class="alert hide"></div>

다음을 사용하십시오.

$("#messagebox").message({text: "Hello world!", type: "error"});

당신은 모든 부트 스트랩 경고 유형을 전달할 수 error, success과 warning에 type옵션으로 속성입니다.

이 방법으로 3 초 후에 경고 페이드를 닫을 수 있습니다. 도움이 되길 바랍니다.

    setTimeout(function(){
    $('.alert').fadeTo("slow", 0.1, function(){
        $('.alert').alert('close')
    });     
    }, 3000)

이것은 매우 중요한 질문 이며 현재 메시지를 바꾸고 새 메시지를 추가하여 메시지를 완료 (표시 / 숨기기)하는 데 어려움을 겪었습니다.

아래는 작동 예입니다.

function showAndDismissAlert(type, message) {

  var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';
  $(".alert-messages").prepend(htmlAlert);
  $(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() {
    $(this).remove();
  });

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert-messages"></div>

<div class="buttons">
  <button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>
  <button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>
  <button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>
</div>

다른 사람들에게 도움이되기를 바랍니다!