gpt4 book ai didi

javascript - Bootstrap 警报附加和淡入/淡出

转载 作者:太空宇宙 更新时间:2023-11-04 07:16:48 24 4
gpt4 key购买 nike

我想在关闭时使用 fadeIn 效果和 fadeOut 效果动态添加 Bootstrap 警报,我试过:

function alert(title, text, type) {
var html = $("<div class='alert alert-dismissible hide fade " + type + "'><strong>" + title + "</strong> " + text + "<a href='#' class='close float-close' data-dismiss='alert' aria-label='close'>×</a></div>");
$('body').append(html);
html.addClass('in show');
}


$('#EMail').click(function() {
alert('Error!', 'Your Email is not valid', 'alert-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<input type="text" id="EMail" />

有了这个,关闭工作成功但附加 fadeIn 效果不起作用。如何在具有淡入效果的文档中附加 Bootstrap 警报?

请注意,我不需要 jQuery fadeInfadeOut 我只想使用标准 Bootstrap class 这样的 淡入淡出 + inout

最佳答案

使用 setTimeout 更新函数

function alert(title, text, type) {
var html = $("<div class='alert alert-dismissible hide fade in " + type + "'><strong>" + title + "</strong> " + text + "<a href='#' class='close float-close' data-dismiss='alert' aria-label='close'>×</a></div>");
$('body').append(html);
setTimeout(function() {
html.addClass('show');
},0);
}


$('#EMail').click(function() {
alert('Error!', 'Your Email is not valid', 'alert-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<input type="text" id="EMail" />

关于javascript - Bootstrap 警报附加和淡入/淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50655444/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com