트위터 부트스트랩 경고가 사라지거나 사라지거나 둘 다 사라질 수도 있습니까?

트위터 부트스트랩 경고가 사라지거나 사라지거나 둘 다 사라질 수도 있습니까?

부트스트랩에서 알림을 처음 봤을 때 모드 창처럼 동작하여 떨어지거나 사라지다가 닫히면 사라지겠다고 생각했습니다.하지만 그들은 항상 보이는 것 같습니다.제 앱 위에 있는 레이어에 앉아서 보여줄 수 있을 것 같은데 기능이 내장되어 있는지 궁금합니다.

감사합니다!

편집, 지금까지의 내용:

<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/ 을 참조하십시오.

긴 답변:

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

부트스트랩은 성능이 훨씬 뛰어난 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 전환을 지원하지 않는 오래된 브라우저를 사용하는 사람들은 즉시 요소가 팝업되는 것을 볼 수 있는데, 이는 조피 애니메이션보다 더 나은 사용자 경험이라고 생각합니다.

나는 위와 같은 답을 찾기 위해 여기에 왔습니다: 부츠 스트랩 경고에서 희미해지는 것.부트스트랩의 코드와 CSS를 좀 파고든 후에 답은 다소 간단합니다.경고에 "인" 클래스를 추가하지 마십시오.경고에서 페이드를 원할 때 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")
}

위의 함수를 호출하면 "인" 클래스가 추가되고 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를 사용하여 상자 안에 페이드 인 할 수 있습니다.'숨김' 클래스에 내장된 부트 스트랩을 사용하여 div 요소에 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();

페이드인 함수에 대한 기간도 지정합니다. 예: $("#saveAlert").페이드인(400);

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

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

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

그러면 기본적으로 div가 숨김으로 설정되고 jQuery가 페이드In 동작을 수행하여 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>

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

더하다hidealert-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);
   });
});

현재의 대답들 중 어떤 것도 저에게 통하지 않았습니다.부트스트랩 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>

3초 후에 경보가 희미해져 닫히는 방법을 사용했습니다.유용하게 쓰이길 바랍니다.

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

는 부트스트랩이 하지 않습니다.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) 2개 클래스 사용하기fade그리고.in한 번의 전환은 클래스 공간을 오염시킵니다.그리고, 확실하지 않습니다.fade그리고.in서로 연관되어 있습니다. 그들은in수업은 완전히 독립적인 수업처럼 보입니다.alert그리고.alert-success.

가장 좋은 해결책은 사용하는 것입니다.faded요소가 희미해졌을 때, 그리고 그 클래스를 로 대체하기 위해.faded-in요소가 희미해졌을 때 말입니다.

경고 빛 바랜 상태

그래서 질문에 대한 답을.경고 마크업, 스타일, 논리는 다음과 같이 작성되어야 한다고 생각합니다.참고: 바닐라 자바스크립트를 사용하는 경우 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;
}

제이쿼리

$('#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옵션으로 부동산을 선택할 수 있습니다.

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

다음은 작동 예입니다.

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>

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

언급URL : https://stackoverflow.com/questions/7676356/can-twitter-bootstrap-alerts-fade-in-as-well-as-out