From b0ff7a6e2314521127f88545a7d9da2773c2d820 Mon Sep 17 00:00:00 2001 From: mougnibas Date: Fri, 29 Nov 2024 10:35:07 +0100 Subject: [PATCH] alerte toute jolie --- css/alerte.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 11 +++++++++ js/alerte.js | 22 +++++++++++++++++ js/main.js | 2 +- 4 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 css/alerte.css create mode 100644 js/alerte.js diff --git a/css/alerte.css b/css/alerte.css new file mode 100644 index 0000000..d7d2b2a --- /dev/null +++ b/css/alerte.css @@ -0,0 +1,65 @@ +/* styles.css */ + +/* Modal styles */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Fixed in place */ + z-index: 1; /* On top of everything */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + background-color: rgba(0, 0, 0, 0.4); /* Black background with transparency */ + } + + /* Modal content box */ + .modal-content { + background-color: #fefefe; + margin: 15% auto; /* Center the modal */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Width of the modal */ + max-width: 400px; + text-align: center; + } + + /* Close button */ + .close-btn { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + } + + .close-btn:hover, + .close-btn:focus { + color: black; + text-decoration: none; + cursor: pointer; + } + + /* Button inside modal */ + .modal.button { + padding: 10px 20px; + background-color: #4CAF50; + color: white; + border: none; + cursor: pointer; + } + + .modal:hover { + background-color: #45a049; + } + + /* Styling for the main button */ + .modal.button.show-alert-btn { + padding: 10px 20px; + background-color: #008CBA; + color: white; + border: none; + cursor: pointer; + } + + .modal.button.show-alert-btn:hover { + background-color: #007b9e; + } \ No newline at end of file diff --git a/index.html b/index.html index c3ab14d..b70ac00 100755 --- a/index.html +++ b/index.html @@ -6,12 +6,14 @@ Prog Web Legend + +
@@ -36,6 +38,15 @@ + + +