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="#">×</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');
});
