부트스트랩 경고 자동 닫기
Wishlist에 추가 버튼을 클릭하면 알림을 호출하고 2초 후에 알림을 사라져야 합니다.이렇게 시도했는데, 경고가 뜨자마자 바로 사라집니다.확실하지 않아요, 어디에 벌레가 있는지..누가 저 좀 도와주실 수 있나요?
JS 스크립트
$(document).ready (function(){
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").alert();
window.setTimeout(function () {
$("#success-alert").alert('close');
}, 2000);
});
});
HTML 코드:
<div class="product-options">
<a id="myWish" href="" class="btn btn-mini">Add to Wishlist </a>
<a href="#" class="btn btn-mini"> Purchase </a>
</div>
알림 상자:
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success!</strong>
Product have added to your wishlist.
</div>
원활한 슬라이드 업을 위해:-
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").slideUp(500);
});
$(document).ready(function() {
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
$("#success-alert").slideUp(500);
});
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
<a href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
사용fadeTo()
"아이 캔 해스 키튼즈"의 코드에서 2초 안에 500의 불투명도로 희미해지고 있습니다. 저는 읽을 수 없습니다.지연과 같은 다른 옵션을 사용하는 것이 좋을 것 같습니다()
$(".alert").delay(4000).slideUp(200, function() {
$(this).alert('close');
});
다른 모든 답변이 사용되는 이유slideUp
내 바로 너머에 있습니다.제가 사용하고 있기 때문에fade
그리고.in
클래스가 닫혔을 때(또는 시간 초과 후) 경보가 사라지도록 하려면 "슬라이드 업"되어 충돌하지 않도록 해야 합니다.
그 외에slideUp
방법이 통하지도 않았습니다.경보 자체가 전혀 표시되지 않았습니다.저에게 완벽하게 효과가 있었던 것은 다음과 같습니다.
$(document).ready(function() {
// show the alert
setTimeout(function() {
$(".alert").alert('close');
}, 2000);
});
저는 이것이 더 나은 해결책이라는 것을 알았습니다.
$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
$(".alert-dismissible").alert('close');
});
이에 대한 솔루션 하나 더 5초 후 부트스트랩 경고 메시지를 자동으로 닫거나 페이드아웃합니다.
다음은 메시지를 표시하는 데 사용되는 HTML 코드입니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="alert alert-danger">
This is an example message...
</div>
<script type="text/javascript">
$(document).ready(function () {
window.setTimeout(function() {
$(".alert").fadeTo(1000, 0).slideUp(1000, function(){
$(this).remove();
});
}, 5000);
});
</script>
JS를 통해 메시지를 표시하는 것에 국한되지 않으며, 페이지가 로드될 때 이미 메시지가 표시될 수 있습니다.
이 스레드가 오래된 것은 알지만 다른 사람이 필요로 할 경우를 대비해 부트스트랩 5용 스크립트를 추가해야겠다고 생각했습니다.
<script>
setTimeout(function() {
bootstrap.Alert.getOrCreateInstance(document.querySelector(".alert")).close();
}, 3000)
</script>
HTML:
<div class="alert alert-info alert-dismissible fade show js-alert" role="alert">
Javascript:
if (document.querySelector('.js-alert')) {
document.querySelectorAll('.js-alert').forEach(function($el) {
setTimeout(() => {
$el.classList.remove('show');
}, 2000);
});
}
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").alert('close');
});
fadeTo 매개변수가 fadeTo인 위치(속도, 불투명도)
이것은 jQuery를 사용하여 애니메이션을 안팎으로 표시하는 좋은 방법입니다.
$(document).ready(function() {
// show the alert
$(".alert").first().hide().slideDown(500).delay(4000).slideUp(500, function () {
$(this).remove();
});
});
필요할 때 자동 및 수동으로 트리거
$(function () {
TriggerAlertClose();
});
function TriggerAlertClose() {
window.setTimeout(function () {
$(".alert").fadeTo(1000, 0).slideUp(1000, function () {
$(this).remove();
});
}, 5000);
}
C# 컨트롤러:
var result = await _roleManager.CreateAsync(identityRole);
if (result.Succeeded == true)
TempData["roleCreateAlert"] = "Added record successfully";
면도기 페이지:
@if (TempData["roleCreateAlert"] != null)
{
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p>@TempData["roleCreateAlert"]</p>
</div>
}
모든 알림 자동 닫기:
<script type="text/javascript">
$(".alert").delay(5000).slideUp(200, function () {
$(this).alert('close');
});
</script>
당신이 버튼을 여러 번 클릭했음에도 불구하고 이것은 완벽하게 작동했습니다.여기서 나는 닫기를 트리거하는 onClick 기능을 만들었습니다.경고 기능.
function closeAlert(){
const alert = document.getElementById('myalert')
alert.style.display = "block"
setTimeout(function(){
alert.style.display = "none"
}, 3000);
}
@Ionny 답변을 기반으로 부트스트랩 5에서 이를 사용하여 여러 경고 메시지(검증 오류)를 해제합니다.나는 CSS 수업을 사용하고 있습니다.alert-flash
특정 알림 블록만 대상으로 지정합니다.
/**
* Auto hide the flash alerts after a few seconds
*/
setTimeout(function() {
var alertList = document.querySelectorAll('.alert-flash');
alertList.forEach(function (alertNode) {
bootstrap.Alert.getOrCreateInstance(alertNode).close();
})
}, 3000)
언급URL : https://stackoverflow.com/questions/23101966/bootstrap-alert-auto-close
'programing' 카테고리의 다른 글
(LocalDB)에 연결할 수 없음\MSSQLlocalDB -> '사용자-PC\'에 대한 로그인 실패사용자' (0) | 2023.08.11 |
---|---|
NuGet 패키지의 install.ps1 스크립트를 디버그하는 방법 (0) | 2023.08.11 |
최대 절전 모드에서 생성된 값 무시(데이터 병합이 DB에 없습니까?) (0) | 2023.08.11 |
Oracle에서 LOT 데이터 삭제 (0) | 2023.08.11 |
Node.js 또는 Javascript에서 비동기 함수 호출을 동기 함수로 랩하는 방법은 무엇입니까? (0) | 2023.08.11 |