Alert com timeout
Sat Dec 21 2024 23:43:08 GMT+0000 (Coordinated Universal Time)
Saved by
@jdeveloper
#javascript
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alertas com Sessions</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.notice {
display: none;
padding: 10px;
margin: 10px auto;
width: 300px;
border-radius: 5px;
text-align: center;
}
.notice-success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.notice-error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>
</head>
<body>
<div id="notice-success" class="notice notice-success">
<?= $_SESSION['success'] ?? '' ?>
</div>
<div id="notice-error" class="notice notice-error">
<?= $_SESSION['error'] ?? '' ?>
</div>
<script>
$(document).ready(function () {
<?php if (isset($_SESSION['success'])): ?>
$('#notice-success').fadeIn();
setTimeout(function () {
$('#notice-success').fadeOut();
}, 5000);
<?php unset($_SESSION['success']); endif; ?>
<?php if (isset($_SESSION['error'])): ?>
$('#notice-error').fadeIn();
setTimeout(function () {
$('#notice-error').fadeOut();
}, 5000);
<?php unset($_SESSION['error']); endif; ?>
});
</script>
</body>
</html>
content_copyCOPY
Comments