From b21e3ebfa222b045f6a993682c445e3b1659cf15 Mon Sep 17 00:00:00 2001 From: Fred Tempez Date: Fri, 30 Aug 2024 19:04:27 +0200 Subject: [PATCH] agenda une jolie popup --- agenda/view/index/index.css | 33 ++++++++++++++++----- agenda/view/index/index.js.php | 53 ++++++++++++++++++++++++++-------- agenda/view/index/index.php | 19 +++++------- 3 files changed, 75 insertions(+), 30 deletions(-) diff --git a/agenda/view/index/index.css b/agenda/view/index/index.css index 1f47c1e..c7032fe 100644 --- a/agenda/view/index/index.css +++ b/agenda/view/index/index.css @@ -153,21 +153,40 @@ table th{ /* Les popup */ +/* Style de base pour le popup */ #eventPopup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); - background-color: white; + width: 300px; padding: 20px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); - z-index: 1000; + background-color: #ffffff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 8px; + text-align: center; + z-index: 1000; /* S'assure que le popup est au-dessus des autres éléments */ } -.popup-content { - text-align: left; +/* Style du bouton de fermeture */ +.close-btn { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; + font-size: 12px; /* Taille de la croix de fermeture */ } -.popup-content h2 { - margin-top: 0; +/* Style pour le titre de l'événement */ +.event-title { + font-size: 18px; + font-weight: bold; + margin-bottom: 10px; } + +/* Style pour les détails de l'événement */ +.event-details { + font-size: 14px; + color: #666; +} + diff --git a/agenda/view/index/index.js.php b/agenda/view/index/index.js.php index d4baab8..abf4363 100644 --- a/agenda/view/index/index.js.php +++ b/agenda/view/index/index.js.php @@ -65,7 +65,7 @@ $(document).ready(function () { var eventStart = info.event.start; var eventEnd = info.event.end; var eventDescription = info.event.extendedProps.description; // Exemple d'attribut personnalisé - + // Afficher les informations dans la popup showPopup(eventId, eventTitle, eventStart, eventEnd, eventDescription); } @@ -127,23 +127,52 @@ $(document).ready(function () { calendar.render(); }); + $('.close-btn').on('click', function () { + $('#eventPopup').fadeOut(); // Utilise fadeOut pour une fermeture en fondu + }); + + // Fermer le popup en cliquant à l'extérieur de '#eventPopup' + $(document).on('mousedown', function(event) { + // Vérifie si le clic a été fait à l'extérieur de '#eventPopup' + if (!$(event.target).closest('#eventPopup').length) { + // Si le popup est visible, le fermer + if ($('#eventPopup').is(':visible')) { + $('#eventPopup').fadeOut(); + } + } + }); + }); /** Fonction pour affiche la popup */ function showPopup(eventId, eventTitle, eventStart, eventEnd, eventDescription) { - // Utilisation de l'API Date native pour formater les dates de début et de fin - var formattedStart = eventStart ? eventStart.toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'N/A'; - var formattedEnd = eventEnd ? eventEnd.toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'N/A'; + // Utilisation de l'API Date native pour formater les dates de début et de fin + var formattedStart = eventStart ? eventStart.toLocaleString('fr-FR', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit' + }) : 'N/A'; + var formattedEnd = eventEnd ? eventEnd.toLocaleString('fr-FR', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit' + }) : 'N/A'; - // Remplir les éléments de la popup avec les informations de l'événement - $('#popupEventId').text(eventId); - $('#popupEventTitle').text(eventTitle); - $('#popupEventStart').text(formattedStart); - $('#popupEventEnd').text(formattedEnd); - $('#popupEventDescription').text(eventDescription); + // Remplir les éléments de la popup avec les informations de l'événement + $('#popupEventTitle').text(eventTitle); + $('#popupEventStart').text(formattedStart); + $('#popupEventEnd').text(formattedEnd); - // Afficher la popup - $('#eventPopup').fadeIn(); + // Afficher la popup + $('#eventPopup').fadeIn(); } +/* Refermer la popup */ +function closePopup() { + document.querySelector('.popup').style.display = 'none'; +} \ No newline at end of file diff --git a/agenda/view/index/index.php b/agenda/view/index/index.php index c643827..9b688bb 100644 --- a/agenda/view/index/index.php +++ b/agenda/view/index/index.php @@ -2,17 +2,14 @@
- +
\ No newline at end of file