Bootstrap 5
E Commerce
Sweetalert2
Bootstrap 5 Design
Template
Html
Integration List
Alert
SweetAlert2 avec Bootstrap 5 optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Swertalert2 Bootstrap 5 2026 23040036 | AngularForAll</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- SweetAlert2 -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem 0;
font-family: 'Inter', system-ui, sans-serif;
}
.main-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 30px;
padding: 3rem;
box-shadow: 0 25px 50px rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
}
h1 {
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
margin-bottom: 1rem;
}
.alert-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
height: 100%;
transition: all 0.3s;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
cursor: pointer;
}
.alert-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.15);
}
.alert-icon {
width: 60px;
height: 60px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 28px;
}
.section-title {
position: relative;
margin-bottom: 2rem;
padding-bottom: 1rem;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 4px;
}
.btn-gradient {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 30px;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s;
}
.btn-gradient:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
color: white;
}
.code-example {
background: #1e1e1e;
border-radius: 12px;
padding: 1rem;
margin-top: 1rem;
overflow-x: auto;
}
.code-example pre {
margin: 0;
color: #d4d4d4;
font-family: 'Courier New', monospace;
font-size: 13px;
}
.badge-custom {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
}
.toast-demo {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
}
.color-palette {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.color-dot {
width: 30px;
height: 30px;
border-radius: 10px;
cursor: pointer;
transition: transform 0.2s;
}
.color-dot:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="text-center mb-4">
<h1 class="display-3">
<i class="fas fa-bell me-3" style="background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
SweetAlert2
</h1>
<p class="lead text-white-50">Alertes modernes et personnalisables pour Bootstrap 5</p>
</div>
<div class="main-container">
<!-- Alertes de base -->
<h3 class="section-title"><i class="fas fa-star me-2"></i>Alertes de base</h3>
<div class="row g-4 mb-5">
<div class="col-md-3">
<div class="alert-card" onclick="showSuccess()">
<div class="alert-icon bg-success bg-opacity-10 text-success">
<i class="fas fa-check-circle"></i>
</div>
<h5>Succès</h5>
<p class="text-muted small">Confirmation d'action réussie</p>
<span class="badge-custom">simple</span>
</div>
</div>
<div class="col-md-3">
<div class="alert-card" onclick="showError()">
<div class="alert-icon bg-danger bg-opacity-10 text-danger">
<i class="fas fa-times-circle"></i>
</div>
<h5>Erreur</h5>
<p class="text-muted small">Message d'erreur</p>
<span class="badge-custom">simple</span>
</div>
</div>
<div class="col-md-3">
<div class="alert-card" onclick="showWarning()">
<div class="alert-icon bg-warning bg-opacity-10 text-warning">
<i class="fas fa-exclamation-triangle"></i>
</div>
<h5>Avertissement</h5>
<p class="text-muted small">Message d'attention</p>
<span class="badge-custom">simple</span>
</div>
</div>
<div class="col-md-3">
<div class="alert-card" onclick="showInfo()">
<div class="alert-icon bg-info bg-opacity-10 text-info">
<i class="fas fa-info-circle"></i>
</div>
<h5>Information</h5>
<p class="text-muted small">Message informatif</p>
<span class="badge-custom">simple</span>
</div>
</div>
</div>
<!-- Alertes avec confirmation -->
<h3 class="section-title"><i class="fas fa-question-circle me-2"></i>Alertes de confirmation</h3>
<div class="row g-4 mb-5">
<div class="col-md-4">
<div class="alert-card" onclick="showConfirm()">
<div class="alert-icon bg-primary bg-opacity-10 text-primary">
<i class="fas fa-question"></i>
</div>
<h5>Confirmation simple</h5>
<p class="text-muted small">Oui / Non avec callback</p>
<span class="badge-custom">interactif</span>
</div>
</div>
<div class="col-md-4">
<div class="alert-card" onclick="showDeleteConfirm()">
<div class="alert-icon bg-danger bg-opacity-10 text-danger">
<i class="fas fa-trash-alt"></i>
</div>
<h5>Confirmation suppression</h5>
<p class="text-muted small">Alerte de suppression</p>
<span class="badge-custom">danger</span>
</div>
</div>
<div class="col-md-4">
<div class="alert-card" onclick="showCustomConfirm()">
<div class="alert-icon bg-success bg-opacity-10 text-success">
<i class="fas fa-check-double"></i>
</div>
<h5>Trois options</h5>
<p class="text-muted small">Sauvegarder / Ignorer / Annuler</p>
<span class="badge-custom">avancé</span>
</div>
</div>
</div>
<!-- Alertes avancées -->
<h3 class="section-title"><i class="fas fa-cog me-2"></i>Alertes avancées</h3>
<div class="row g-4 mb-5">
<div class="col-md-3">
<div class="alert-card" onclick="showTimer()">
<div class="alert-icon bg-warning bg-opacity-10 text-warning">
<i class="fas fa-clock"></i>
</div>
<h5>Minuteur</h5>
<p class="text-muted small">Fermeture automatique</p>
<span class="badge-custom">timer</span>
</div>
</div>
<div class="col-md-3">
<div class="alert-card" onclick="showInput()">
<div class="alert-icon bg-info bg-opacity-10 text-info">
<i class="fas fa-keyboard"></i>
</div>
<h5>Avec input</h5>
<p class="text-muted small">Saisie utilisateur</p>
<span class="badge-custom">form</span>
</div>
</div>
<div class="col-md-3">
<div class="alert-card" onclick="showImage()">
<div class="alert-icon bg-success bg-opacity-10 text-success">
<i class="fas fa-image"></i>
</div>
<h5>Avec image</h5>
<p class="text-muted small">Alerte illustrée</p>
<span class="badge-custom">media</span>
</div>
</div>
<div class="col-md-3">
<div class="alert-card" onclick="showCustomHtml()">
<div class="alert-icon bg-secondary bg-opacity-10 text-secondary">
<i class="fas fa-code"></i>
</div>
<h5>HTML personnalisé</h5>
<p class="text-muted small">Contenu sur mesure</p>
<span class="badge-custom">custom</span>
</div>
</div>
</div>
<!-- Toasts & Notifications -->
<h3 class="section-title"><i class="fas fa-bell me-2"></i>Toasts & Notifications</h3>
<div class="row g-4 mb-5">
<div class="col-md-4">
<div class="alert-card" onclick="showToast()">
<div class="alert-icon bg-success bg-opacity-10 text-success">
<i class="fas fa-toast"></i>
</div>
<h5>Toast notification</h5>
<p class="text-muted small">Message temporaire</p>
<span class="badge-custom">toast</span>
</div>
</div>
<div class="col-md-4">
<div class="alert-card" onclick="showLoading()">
<div class="alert-icon bg-primary bg-opacity-10 text-primary">
<i class="fas fa-spinner"></i>
</div>
<h5>Chargement</h5>
<p class="text-muted small">Indicateur de progression</p>
<span class="badge-custom">loader</span>
</div>
</div>
<div class="col-md-4">
<div class="alert-card" onclick="showProgress()">
<div class="alert-icon bg-info bg-opacity-10 text-info">
<i class="fas fa-tasks"></i>
</div>
<h5>Barre de progression</h5>
<p class="text-muted small">Avancement étape par étape</p>
<span class="badge-custom">progress</span>
</div>
</div>
</div>
<!-- Personnalisation -->
<h3 class="section-title"><i class="fas fa-palette me-2"></i>Thèmes et personnalisation</h3>
<div class="row g-4 mb-4">
<div class="col-md-6">
<div class="p-4 bg-light rounded-4">
<h5>Couleur de fond</h5>
<div class="color-palette mt-3">
<div class="color-dot" style="background: #667eea;" onclick="changeTheme('#667eea')"></div>
<div class="color-dot" style="background: #f59e0b;" onclick="changeTheme('#f59e0b')"></div>
<div class="color-dot" style="background: #10b981;" onclick="changeTheme('#10b981')"></div>
<div class="color-dot" style="background: #ef4444;" onclick="changeTheme('#ef4444')"></div>
<div class="color-dot" style="background: #8b5cf6;" onclick="changeTheme('#8b5cf6')"></div>
<div class="color-dot" style="background: #06b6d4;" onclick="changeTheme('#06b6d4')"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="p-4 bg-light rounded-4">
<h5>Position</h5>
<div class="d-flex gap-2 mt-3 flex-wrap">
<button class="btn btn-outline-primary btn-sm" onclick="showAtPosition('top')">Haut</button>
<button class="btn btn-outline-primary btn-sm" onclick="showAtPosition('top-start')">Haut-Gauche</button>
<button class="btn btn-outline-primary btn-sm" onclick="showAtPosition('top-end')">Haut-Droite</button>
<button class="btn btn-outline-primary btn-sm" onclick="showAtPosition('center')">Centre</button>
<button class="btn btn-outline-primary btn-sm" onclick="showAtPosition('bottom')">Bas</button>
<button class="btn btn-outline-primary btn-sm" onclick="showAtPosition('bottom-start')">Bas-Gauche</button>
<button class="btn btn-outline-primary btn-sm" onclick="showAtPosition('bottom-end')">Bas-Droite</button>
</div>
</div>
</div>
</div>
<!-- Exemple de code -->
<div class="mt-5">
<h5><i class="fas fa-code me-2"></i>Code d'exemple</h5>
<div class="code-example">
<pre>Swal.fire({
title: 'Titre',
text: 'Message',
icon: 'success',
confirmButtonText: 'OK',
showCancelButton: true,
cancelButtonText: 'Annuler'
})</pre>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
// Variables globales
let currentTheme = '#667eea';
// ==================== ALERTES DE BASE ====================
function showSuccess() {
Swal.fire({
title: 'Succès !',
text: 'Votre action a été réalisée avec succès.',
icon: 'success',
confirmButtonText: 'Super !',
confirmButtonColor: currentTheme,
background: 'white',
customClass: {
popup: 'animate__animated animate__fadeInUp'
}
});
}
function showError() {
Swal.fire({
title: 'Erreur !',
text: 'Une erreur est survenue lors du traitement.',
icon: 'error',
confirmButtonText: 'Fermer',
confirmButtonColor: currentTheme,
footer: '<a href="#" class="text-muted small">Signaler ce problème</a>'
});
}
function showWarning() {
Swal.fire({
title: 'Attention !',
text: 'Cette action est irréversible.',
icon: 'warning',
confirmButtonText: 'Je comprends',
confirmButtonColor: '#f59e0b',
showCancelButton: true,
cancelButtonText: 'Annuler'
});
}
function showInfo() {
Swal.fire({
title: 'Information',
text: 'Voici une information importante à connaître.',
icon: 'info',
confirmButtonText: 'OK',
confirmButtonColor: currentTheme,
timer: 3000,
timerProgressBar: true
});
}
// ==================== ALERTES DE CONFIRMATION ====================
function showConfirm() {
Swal.fire({
title: 'Êtes-vous sûr ?',
text: 'Cette action peut être annulée.',
icon: 'question',
showCancelButton: true,
confirmButtonColor: currentTheme,
confirmButtonText: 'Oui, continuer',
cancelButtonText: 'Non, annuler',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: 'Confirmé !',
text: 'Vous avez choisi de continuer.',
icon: 'success',
confirmButtonColor: currentTheme
});
} else if (result.dismiss === Swal.DismissReason.cancel) {
Swal.fire({
title: 'Annulé',
text: 'Action annulée.',
icon: 'error',
confirmButtonColor: currentTheme
});
}
});
}
function showDeleteConfirm() {
Swal.fire({
title: 'Supprimer ?',
text: 'Cette action est irréversible !',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
confirmButtonText: 'Oui, supprimer',
cancelButtonText: 'Annuler',
background: '#fff5f5',
customClass: {
confirmButton: 'btn-danger',
cancelButton: 'btn-secondary'
}
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: 'Supprimé !',
text: 'L\'élément a été supprimé.',
icon: 'success',
confirmButtonColor: currentTheme
});
}
});
}
function showCustomConfirm() {
Swal.fire({
title: 'Sauvegarder les modifications ?',
text: 'Vous avez des modifications non enregistrées.',
icon: 'question',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: 'Sauvegarder',
denyButtonText: 'Ne pas sauvegarder',
cancelButtonText: 'Annuler',
confirmButtonColor: currentTheme,
denyButtonColor: '#6c757d'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire('Sauvegardé !', '', 'success');
} else if (result.isDenied) {
Swal.fire('Modifications ignorées', '', 'info');
}
});
}
// ==================== ALERTES AVANCÉES ====================
function showTimer() {
let timerInterval;
Swal.fire({
title: 'Redirection automatique',
html: 'Vous serez redirigé dans <b></b> secondes.',
timer: 5000,
timerProgressBar: true,
confirmButtonColor: currentTheme,
didOpen: () => {
Swal.showLoading();
const timer = Swal.getPopup().querySelector('b');
timerInterval = setInterval(() => {
timer.textContent = Math.ceil(Swal.getTimerLeft() / 1000);
}, 100);
},
willClose: () => {
clearInterval(timerInterval);
}
}).then((result) => {
if (result.dismiss === Swal.DismissReason.timer) {
console.log('Fermé par le timer');
}
});
}
function showInput() {
Swal.fire({
title: 'Entrez votre email',
input: 'email',
inputLabel: 'Adresse email',
inputPlaceholder: 'exemple@domaine.com',
confirmButtonColor: currentTheme,
showCancelButton: true,
inputValidator: (value) => {
if (!value) {
return 'Vous devez entrer un email !';
}
}
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: 'Email enregistré',
text: `Votre email : ${result.value}`,
icon: 'success',
confirmButtonColor: currentTheme
});
}
});
}
function showImage() {
Swal.fire({
title: 'Félicitations !',
text: 'Vous avez gagné un prix !',
imageUrl: 'https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?w=400',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Image de célébration',
confirmButtonColor: currentTheme,
confirmButtonText: 'Génial !'
});
}
function showCustomHtml() {
Swal.fire({
title: '<strong>HTML <u>personnalisé</u></strong>',
icon: 'info',
html: `
<div class="text-start">
<p>Vous pouvez utiliser du <b>HTML</b> dans vos alertes :</p>
<ul>
<li><i class="fas fa-check text-success"></i> Listes</li>
<li><i class="fas fa-check text-success"></i> <a href="#">Liens</a></li>
<li><i class="fas fa-check text-success"></i> <span class="badge bg-primary">Badges</span></li>
</ul>
<div class="progress mt-3">
<div class="progress-bar" style="width: 75%">75%</div>
</div>
</div>
`,
confirmButtonColor: currentTheme,
confirmButtonText: 'Fermer',
showCloseButton: true,
focusConfirm: false
});
}
// ==================== TOASTS & NOTIFICATIONS ====================
function showToast() {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer);
toast.addEventListener('mouseleave', Swal.resumeTimer);
}
});
Toast.fire({
icon: 'success',
title: 'Notification envoyée avec succès'
});
}
function showLoading() {
Swal.fire({
title: 'Chargement en cours...',
html: 'Veuillez patienter',
allowOutsideClick: false,
allowEscapeKey: false,
didOpen: () => {
Swal.showLoading();
}
});
setTimeout(() => {
Swal.fire({
title: 'Terminé !',
icon: 'success',
confirmButtonColor: currentTheme
});
}, 2000);
}
function showProgress() {
let progress = 0;
Swal.fire({
title: 'Traitement en cours',
html: '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div></div>',
confirmButtonColor: currentTheme,
showConfirmButton: false,
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
const progressBar = Swal.getHtmlContainer().querySelector('.progress-bar');
const timer = setInterval(() => {
progress += 10;
progressBar.style.width = progress + '%';
if (progress >= 100) {
clearInterval(timer);
Swal.fire({
title: 'Terminé !',
icon: 'success',
confirmButtonColor: currentTheme
});
}
}, 300);
}
});
}
// ==================== PERSONNALISATION ====================
function changeTheme(color) {
currentTheme = color;
Swal.fire({
title: 'Thème changé !',
text: 'Les alertes utiliseront cette couleur.',
icon: 'success',
confirmButtonColor: color,
background: 'white'
});
}
function showAtPosition(position) {
Swal.fire({
position: position,
icon: 'success',
title: 'Position : ' + position,
showConfirmButton: false,
timer: 1500,
background: 'white',
confirmButtonColor: currentTheme
});
}
// ==================== FONCTIONS SUPPLÉMENTAIRES ====================
// Mixin pour les alertes personnalisées
const customAlert = Swal.mixin({
confirmButtonColor: currentTheme,
cancelButtonColor: '#6c757d',
background: 'white',
customClass: {
popup: 'animate__animated animate__fadeInUp'
}
});
// Démontrer le mixin
function showMixedAlert() {
customAlert.fire({
title: 'Alerte personnalisée',
text: 'Créée avec un mixin réutilisable',
icon: 'info'
});
}
// Exemple avec promesse
async function showAsyncAlert() {
const { value: fruit } = await Swal.fire({
title: 'Choisissez un fruit',
input: 'select',
inputOptions: {
'Pommes': 'Pommes',
'Bananes': 'Bananes',
'Oranges': 'Oranges',
'Fraises': 'Fraises'
},
inputPlaceholder: 'Sélectionnez',
showCancelButton: true,
confirmButtonColor: currentTheme
});
if (fruit) {
Swal.fire({
title: `Vous avez choisi : ${fruit}`,
icon: 'success',
confirmButtonColor: currentTheme
});
}
}
// Console log des fonctionnalités disponibles
console.log('🎨 SweetAlert2 chargé avec succès !');
console.log('💡 15+ types d\'alertes disponibles');
console.log('🎯 Essayez les fonctions : showSuccess(), showConfirm(), showToast(), etc.');
</script>
<!-- Bouton supplémentaire -->
<div class="text-center mt-4">
<button class="btn-gradient" onclick="showAsyncAlert()">
<i class="fas fa-gift me-2"></i>Démo avancée (async/await)
</button>
</div>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur