javascript - 我想关闭一条警报消息
问题描述
朋友们想问我哪里有问题,显示“alert”消息没有在几秒钟内消失,大概是我的代码哪里出错了,
我非常感谢您的帮助。
html代码
<?php if ($this->session->flashdata('success')): ?>
<div class="alert alert-danger">
<?php echo $this->session->flashdata('success'); ?>
</div>
<?php endif; ?>
javascript
$(document).ready(function()
{
setTimeout(function()
alert('success');
},
5000);
});
解决方案
尝试使用自定义警报框,以便您能够自定义它。
这是一个基本示例
alertBox('This is a custom alert box');
function alertBox(message) {
var alertBox = document.getElementById('alert-box');
alertBox.innerHTML = message;
alertBox.style.display = 'block';
}
function alertBoxHide() {
var alertBox = document.getElementById('alert-box');
alertBox.style.display = 'none';
}
.alert-box {
display: none;
position: absolute;
top: 32px;
left: 40vw;
width: 20vw;
height: 70px;
border: 1px solid gray;
}
<div id="alert-box" class="alert-box"></div>
<button class="button" onclick="alertBoxHide()">Hide Alert Box</button>
如果你愿意,你也可以把它连接起来自动消失。
如果您有兴趣,这是一种更好的方式
var toggleStatus = true;
function toggle(button) {
if (toggleStatus) {
alertBoxShow('This is a Heading', 'This is the content of the custom alert box');
toggleStatus = false;
button.innerHTML = 'Hide Alert Box';
} else {
alertBoxHide()
toggleStatus = true;
button.innerHTML = 'Show Alert Box';
}
}
function quickShow() {
alertBoxShow('This is timed', 'This will only appear for 3 seconds');
window.setTimeout(function() {
alertBoxHide();
}, 3000)
}
function alertBoxShow(header, content) {
var alertBox = document.getElementById('alertBox');
alertBox.innerHTML = '<div class="alert-box-header">' + header + '</div><hr><div class="alert-box-content">' + content + '</div>';
alertBox.style.top = '32px';
}
function alertBoxHide() {
var alertBox = document.getElementById('alertBox');
alertBox.style.top = '-130px';
}
.alert-box {
position: absolute;
top: -130px;
left: 30vw;
width: 40vw;
height: 120px;
border: 1px solid gray;
border-radius: 4px;
font-family: Arial;
transition: 0.5s ease-in-out;
}
.alert-box-header {
padding: 16px;
padding-bottom: 0px;
font-size: 24px;
text-align: center;
}
.alert-box-content {
padding: 16px;
padding-top: 0px;
margin-top: 0px;
font-size: 18px;
}
hr {
border: 0px;
width: 90%;
height: 2px;
background-color: gray;
}
<div id="alertBox" class="alert-box"></div>
<button onclick="toggle(this)">Show Alert Box</button>
<br><br>
<button onclick="quickShow()">Show Alert Box For 3 Seconds</button>
推荐阅读
- excel - Excel - 在两列中列出每个唯一对来自 excel 中的两个源列
- java - FileProvider.getUriForFile 上下文抛出 NullPointer 异常
- java - 为什么 Android Studio 构建找不到符号变量 MockPackageManager?
- ios - performSegue 不工作并导致崩溃
- bash - 如何使用 bash 脚本递归地将 S3 中的文件从文件夹复制到另一个文件夹?
- java - java语句的范围
- apache-kafka - SQS 风格的分布式延迟队列,但在 AWS 之外?
- regex - Regex 根据 Regex 将字符串拆分为 N 个匹配项
- python - 如何保存 Fbo 以用作画布的纹理?
- php - 如何在 IIS 服务器上获取有效的 DOCUMENT_ROOT 值?