這是我的問題的代碼: https ://codepen.io/isaflame/pen/yLEazmM
html: `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Reservation</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="modal.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link
href="https://fonts.googleapis.com/css?family=DM Sans"
rel="stylesheet"
/>
</head>
<body>
<div class="topnav" id="myTopnav">
<div class="header-logo">
<img alt="logo" src="Logo.png" width="auto" height="auto" />
</div>
<div class="main-navbar">
<a href="#" class="active"><span>Accueil</span></a>
<a href="#"><span>Détails de l'évènement</span></a>
<a href="#"><span>à propos</span></a>
<a href="#"><span>Contact</span></a>
<a href="#"><span>évènements passés</span></a>
<a href="javascript:void(0);" class="icon" onclick="editNav()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
</div>
<main>
<div class="hero-section" >
<div class="hero-content">
<h1 class="hero-headline">
Marathon national<br>
de jeux vidéos
</h1>
<p class="hero-text">
Vous aimez jouer ? Notre prochain évènement gaming est ouvert
aux réservations... Places limitées !
</p>
<button class="btn-signup modal-btn">
je m'inscris
</button>
</div>
<div class="hero-img">
<img src="./bg_img.jpg" alt="img" />
</div>
<button class="btn-signup modal-btn">
je m'inscris
</button>
</div>
<div class="bground"><!--ouverture et fermeture modale en js-->
<div class="content" >
<span class="close" onclick = closeModal()></span>
<div class="modal-body">
<!--ajout id tag "reserve"pour le formulaire-->
<form
name="reserve"
id="reserve"
action="index.html"
method="get">
<div
class="formData">
<label>Prénom</label><br>
<input
class="text-control"
type="text"
id="first"
name="first"
minlength="2"
>
</div>
<div
class="formData">
<label>Nom</label><br>
<input
class="text-control"
type="text"
id="last"
name="last"
/><br>
</div>
<div
class="formData">
<label>E-mail</label><br>
<input
class="text-control"
type="email"
id="email"
name="email"
/><br>
</div>
<!--le navigateur comprend la date et affiche un calendrier-->
<div
class="formData">
<label>Date de naissance</label><br>
<input
class="text-control"
type="date"
id="birthdate"
name="birthdate"
/><br>
</div>
<div
class="formData">
<label>à combien de tournois GameOn avez-vous déjà participé ?</label><br>
<input type="number" class="text-control" id="quantity" name="quantity" min="0" max="99">
</div>
<p class="text-label">A quel tournoi souhaitez-vous participer cette année ?</p>
<div
class="formData">
<input
class="checkbox-input"
type="radio"
id="location1"
name="location"
value="New York"
/>
<label class="checkbox-label" for="location1">
<span class="checkbox-icon"></span>
New York</label
>
<input
class="checkbox-input"
type="radio"
id="location2"
name="location"
value="San Francisco"
/>
<label class="checkbox-label" for="location2">
<span class="checkbox-icon"></span>
San Francisco</label
>
<input
class="checkbox-input"
type="radio"
id="location3"
name="location"
value="Seattle"
/>
<label class="checkbox-label" for="location3">
<span class="checkbox-icon"></span>
Seattle</label
>
<input
class="checkbox-input"
type="radio"
id="location4"
name="location"
value="Chicago"
/>
<label class="checkbox-label" for="location4">
<span class="checkbox-icon"></span>
Chicago</label
>
<input
class="checkbox-input"
type="radio"
id="location5"
name="location"
value="Boston"
/>
<label class="checkbox-label" for="location5">
<span class="checkbox-icon"></span>
Boston</label
>
<input
class="checkbox-input"
type="radio"
id="location6"
name="location"
value="Portland"
/>
<label class="checkbox-label" for="location6">
<span class="checkbox-icon"></span>
Portland</label
>
<br><small></small>
</div>
<div
class="formData">
<input
class="checkbox-input"
type="checkbox"
id="checkbox1"
checked
/>
<label class="checkbox2-label" for="checkbox1" required>
<span class="checkbox-icon"></span>
J'ai lu et accepté les conditions d'utilisation.
</label>
<br>
<small></small>
<input class="checkbox-input" type="checkbox" id="checkbox2" />
<label class="checkbox2-label" for="checkbox2">
<span class="checkbox-icon"></span>
Je souhaite être prévenu des prochains évènements.
</label>
<br>
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
</form>
</div>
</div><!--fin content -->
</div>
</main>
<footer>
<p class="copyrights">
Copyright 2014 - 2022, GameOn Inc.
</p>
</footer>
<script src= "modal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
</body>
</html>
css:
:root {
--font-default: "DM Sans", Arial, Helvetica, sans-serif;
--font-slab: var(--font-default);
--modal-duration: 0.8s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Landing Page */
body {
margin: 0;
display: flex;
flex-direction: column;
background-image: url("background.png");
font-family: var(--font-default);
font-size: 18px;
max-width: 1300px;
margin: 0 auto;
}
p {
margin-bottom: 0;
padding: 0.5vw;
}
img {
padding-right: 1rem;
}
.topnav {
overflow: hidden;
margin: 3.5%;
}
.header-logo {
float: left;
}
.main-navbar {
float: right;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 12px 12px;
margin: 5px;
text-decoration: none;
font-size: 20px;
font-family: Roboto, sans-serif;
}
.topnav a:hover {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav a.active {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
@media screen and (max-width: 540px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-top: -15px;
}
}
main {
font-size: 130%;
font-weight: bolder;
color: black;
padding-top: 0.5vw;
padding-left: 2vw;
padding-right: 2vw;
margin: 1px 20px 15px;
border-radius: 2rem;
text-align: justify;
}
.modal-btn {
font-size: 145%;
background: #fe142f;
display: flex;
margin: auto;
padding: 2em;
color: #fff;
padding: 0.75rem 2.5rem;
border-radius: 1rem;
cursor: pointer;
}
.modal-btn:hover {
background: #3876ac;
}
.footer {
margin: 20px;
padding: 10px;
font-family: var(--font-slab);
}
/* Modal form */
.button {
background: #fe142f;
margin-top: 0.5em;
padding: 1em;
color: #fff;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background: #3876ac;
}
.smFont {
font-size: 16px;
}
.bground {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(26, 39, 156, 0.4);
}
.content {
margin: 5% auto;
width: 100%;
max-width: 500px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
background: #232323;
border-radius: 10px;
overflow: hidden;
position: relative;
color: #fff;
padding-top: 10px;
}
.modal-body {
padding: 15px 8%;
margin: 15px auto;
}
label {
font-family: var(--font-default);
font-size: 17px;
font-weight: normal;
display: inline-block;
margin-bottom: 11px;
}
input {
padding: 8px;
border: 0.8px solid #ccc;
outline: none;
}
.text-control {
margin: 0;
padding: 8px;
width: 100%;
border-radius: 8px;
font-size: 20px;
height: 48px;
}
.formData[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: #e54858;
display: block;
margin-top: 7px;
margin-bottom: 7px;
text-align: right;
line-height: 0.3;
opacity: 0;
transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
border: 2px solid #e54858;
}
/*
input[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: red;
} */
.checkbox-label,
.checkbox2-label {
position: relative;
margin-left: 36px;
font-size: 12px;
font-weight: normal;
}
.checkbox-label .checkbox-icon,
.checkbox2-label .checkbox-icon {
display: block;
width: 20px;
height: 20px;
border: 2px solid #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: -30px;
top: -1px;
transition: 0.3s;
}
.checkbox-label .checkbox-icon::after,
.checkbox2-label .checkbox-icon::after {
content: "";
width: 13px;
height: 13px;
background-color: #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
opacity: 0;
}
.checkbox-input {
display: none;
}
.checkbox-input:checked .checkbox-label .checkbox-icon::after,
.checkbox-input:checked .checkbox2-label .checkbox-icon::after {
opacity: 1;
}
.checkbox-input:checked .checkbox2-label .checkbox-icon {
background: #279e7a;
}
.checkbox2-label .checkbox-icon {
border-radius: 4px;
border: 0;
background: #c4c4c4;
}
.checkbox2-label .checkbox-icon::after {
width: 7px;
height: 4px;
border-radius: 2px;
background: transparent;
border: 2px solid transparent;
border-bottom-color: #fff;
border-left-color: #fff;
transform: rotate(-55deg);
left: 21%;
top: 19%;
}
.close {
position: absolute;
right: 15px;
top: 15px;
width: 32px;
height: 32px;
opacity: 1;
cursor: pointer;
transform: scale(0.7);
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 33px;
width: 3px;
background-color: #fff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.btn-submit,
.btn-signup {
background: #fe142f;
display: block;
margin: 0 auto;
border-radius: 7px;
font-size: 1rem;
padding: 12px 82px;
color: #fff;
cursor: pointer;
border: 0;
}
/* custom select styles */
.custom-select {
position: relative;
font-family: Arial;
font-size: 1.1rem;
font-weight: normal;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #fff;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 10px;
right: 13px;
width: 11px;
height: 11px;
border: 3px solid transparent;
border-bottom-color: #f00;
border-left-color: #f00;
transform: rotate(-48deg);
border-radius: 5px 0 5px 0;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
transform: rotate(135deg);
top: 13px;
}
.select-items div,
.select-selected {
color: #000;
padding: 11px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
border-radius: 8px;
height: 48px;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: #fff;
top: 89%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* custom select end */
.text-label {
font-weight: normal;
font-size: 16px;
}
.hero-section {
min-height: 93vh;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(12, 1fr);
overflow: hidden;
box-shadow: 0 2px 7px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.hero-content {
padding: 51px 67px;
grid-column: span 4;
background: #232323;
color: #fff;
position: relative;
text-align: left;
min-width: 424px;
}
.hero-content::after {
content: "";
width: 100%;
height: 100%;
background: #232323;
position: absolute;
right: -80px;
top: 0;
}
.hero-content > * {
position: relative;
z-index: 1;
}
.hero-headline {
font-size: 6rem;
font-weight: normal;
white-space: nowrap;
}
.hero-text {
width: 146%;
font-weight: normal;
margin-top: 57px;
padding: 0;
}
.btn-signup {
outline: none;
text-transform: capitalize;
font-size: 1.3rem;
padding: 15px 23px;
margin: 0;
margin-top: 59px;
}
.hero-img {
grid-column: span 8;
}
.hero-img img {
width: 100%;
height: 100%;
display: block;
padding: 0;
}
.copyrights {
color: #fe142f;
padding: 0;
font-size: 1rem;
margin: 60px 0 30px;
font-weight: bolder;
}
.hero-section > .btn-signup {
display: none;
}
footer {
padding-left: 2vw;
padding-right: 2vw;
margin: 0 20px;
}
@media screen and (max-width: 800px) {
.hero-section {
display: block;
box-shadow: unset;
}
.hero-content {
background: #fff;
color: #000;
padding: 20px;
}
.hero-content::after {
content: unset;
}
.hero-content .btn-signup {
display: none;
}
.hero-headline {
font-size: 4.5rem;
white-space: normal;
}
.hero-text {
width: unset;
font-size: 1.5rem;
}
.hero-img img {
border-radius: 10px;
margin-top: 40px;
}
.hero-section > .btn-signup {
display: block;
margin: 32px auto 10px;
padding: 12px 35px;
}
.copyrights {
margin-top: 50px;
text-align: center;
}
}
@keyframes modalopen {
from {
opacity: 0;
transform: translateY(-150px);
}
to {
opacity: 1;
}
}
javascript:
function editNav() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className = " responsive";
} else {
x.className = "topnav";
}
}
// DOM Elements
const modalbg = document.querySelector(".bground");
const modalBtn = document.querySelectorAll(".modal-btn");
const formData = document.querySelectorAll(".formData");
const modalBody = document.querySelector(".modal-body");
const form = document.getElementById("reserve");
const firstName = document.getElementById("first");
const lastName = document.getElementById("last");
const email = document.getElementById("email");
const birthdate = document.getElementById("birthdate");
const quantity = document.getElementById("quantity"); /* nombre de tournois*/
const city = document.getElementsByName("location");
// launch modal form
function launchModal() {
modalbg.style.display = "block";
}
// launch modal event
modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
// close modal form and reset datas in the form
function closeModal() {
modalbg.style.display = "none";
form.reset();
}
//close modal event
//modalBtn.forEach((btn) => btn.addEventListener("click", closeModal));
/*form.addEventListener(
"submit",
validateForm
); /* when submit form => function validateform start*/
// fonction validation du formulaire.
/*si validatefrom n'est pas retournée,
alors fonction greetings est lancée*/
function validateForm(event) {
event.preventDefault();
event.stopPropagation();
if (
!validateFirstName() &&
!validateLastName() &&
!validateEmail() &&
!validateRadio() &&
!validateTournament() &&
!validateDate()
)
return;
/* removeEventListener("submit", greetings())*/
}
/*
formIsValid();
function formIsValid() {
if (!validateForm()) {
greetings();
}
}
*/
//!!!! reste le rechargement de la modale avec message de remerciement
function greetings() {
form.innerHTML = /*html*/ `<div class ="content">
Merci pour votre <br>inscription</div>
<button onclick= "closeModal()">
Fermer </button>`;
}
/**
* fonction validation du prénom et message erreur OK!!
*
* @return {Boolean} true si valide sinon false
*/
function validateFirstName() {
const regexFirstName = /^[A-Z a-z]{2,25}$/; /*min 2 caracteres*/
const parent = document.getElementById("first").parentNode;
if (firstName.value == "" || !regexFirstName.test(firstName.value)) {
firstName.focus();
parent.setAttribute("data-error", "Veuillez entrez un prénom valide");
parent.setAttribute("data-error-visible", "true");
return false;
}
parent.setAttribute("data-error-visible", "false");
return true;
}
//fonction validation du nom et message erreur OK!!!
function validateLastName() {
const regexLastName = /^[A-Z a-z]{2,25}$/; /*min 2 caracteres*/
const parent = document.getElementById("last").parentNode;
console.log(parent, "parent1");
if (lastName.value == "" || !regexLastName.test(lastName.value)) {
lastName.focus();
parent.setAttribute("data-error", "Veuillez entrez un nom valide");
parent.setAttribute("data-error-visible", "true");
return false;
}
parent.setAttribute("data-error-visible", "false");
return true;
}
//fonction validation du courriel et message erreur OK!!!
function validateEmail() {
const regexEmail =
/^[a-zA-Z][a-zA-Z0-9\-\_\.] @[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}$/;
const parent = document.getElementById("email").parentNode;
console.log(parent, "parent2");
console.log(email.value);
if (email.value == "" || !regexEmail.test(email.value)) {
email.focus();
parent.setAttribute("data-error", "Veuillez entrez un courriel valide");
parent.setAttribute("data-error-visible", "true");
return false;
}
parent.setAttribute("data-error-visible", "false");
return true;
}
function setDateLimits() {
const dateToday = new Date();
// console.log (dateToday);
const day = dateToday.getDate(); /* jour du mois en cours */
// console.log (day);
const month =
dateToday.getMonth()
1; /* mois de l'année en cours" 1" car renvoie "0" pour janvier*/
// console.log (month);
const year = dateToday.getFullYear(); /* année en cours*/
// console.log (year);
let date = new Date(`${year - 18}-${month}-${day}`)
.toISOString()
.split("T")[0];
console.log(birthdate, date);
birthdate.setAttribute("max", date);
date = new Date(`${year - 100}-${month}-${day}`).toISOString().split("T")[0];
console.log(birthdate, date);
birthdate.setAttribute("min", date);
}
function validateDate() {
const parent = birthdate.parentNode;
let isValid = true;
const selectedDate = new Date(birthdate.value);
const dateToday = new Date();
const day = dateToday.getDate(); /* jour du mois en cours */
const month =
dateToday.getMonth()
1; /* mois de l'année en cours" 1" car renvoie "0" pour janvier*/
const year = dateToday.getFullYear(); /* année en cours*/
let date = new Date(`${year - 18}-${month}-${day}`);
if (selectedDate > date) {
isValid = false;
} else {
date = new Date(`${year - 100}-${month}-${day}`);
if (selectedDate < date) {
isValid = false;
}
}
if (!isValid) {
birthdate.focus();
parent.setAttribute("data-error", "Veuillez entrez une date valide");
parent.setAttribute("data-error-visible", "true");
return false;
}
parent.setAttribute("data-error-visible", "false");
return true;
}
console.log(quantity.value);
//validation du champ nombre de tournois OK!!!
function validateTournament() {
const quantityTournament = document.querySelector("input[name='quantity']");
const parent = document
.querySelector(`input[name='quantity']`)
.closest(`.formData`);
console.log(parent);
if (quantityTournament.value == "" || null) {
quantity.focus();
parent.setAttribute("data-error", "Veuillez entrez un nombre");
parent.setAttribute("data-error-visible", "true");
return false;
}
parent.setAttribute("data-error-visible", "false");
return true;
}
// fonction validation de la ville (bouton radio) OK!!
function validateRadio() {
const checkradio = document.querySelector("input[name='location']:checked");
const parent = document
.querySelector(`input[name='location']`)
.closest(`.formData`);
console.log(parent, "parent");
if (checkradio != null) {
//Teste si une ville est cochée
parent.setAttribute("data-error-visible", "false");
return true;
}
parent.setAttribute("data-error", "Veuillez choisir une ville");
parent.setAttribute("data-error-visible", "true");
return false;
}
setDateLimits();
` 如果用戶在模態視窗之外單擊十字(成功),我想關閉模態(我沒有找到解決方案)。同樣,我有這個問題:我創建了一個名為“grettings”的函式,以便在填充模式中的表單時,用戶單擊按鈕,然后啟動問候功能并在模式中插入問候訊息。 ..我沒有找到任何解決方案。
我嘗試添加一個條件(modal.js 檔案中的第 63 到 66 行),例如“填寫并驗證表單后,啟動問候功能.. 但它不起作用。任何人都可以幫忙嗎?謝謝進步;
uj5u.com熱心網友回復:
您可以在 modalbg 上添加一個事件偵聽器并檢查您是否實際單擊背景元素以關閉模式。
modalbg.addEventListener("click",(evt)=>{
if (evt.srcElement===modalbg){
closeModal()
}
})
uj5u.com熱心網友回復:
一個想法是將點擊事件監聽器添加到您的模式中。
然后您可以檢查單擊的元素是否在模態內容內。如果沒有,那么您可以關閉模??式。
我認為這樣的事情會起作用:
modalbg.addEventListener('click', (event) => {
const clickInsideModalBody = event.target.closest('.modal-body');
if (!clickInsideModalBody) {
// Close your modal
}
})
(也許您應該僅在模態打開時添加此事件偵聽器,然后在模態關閉時將其洗掉)
您可以在此處閱讀更多資訊.closest
:https ://developer.mozilla.org/en-US/docs/Web/API/Element/closest
uj5u.com熱心網友回復:
我對您的代碼進行了一些操作,以使其按預期作業。
你很接近......但是犯了一個戰略錯誤:用innerHTML
問候訊息替換表格。那應該怎么提交呢?
所以我添加了一個div
包含該問候訊息的display: none;
. 當表單有效時,只需將其切換為可見并隱藏表單。然后在那個問候關閉時,提交。
我還做了一些其他的小改動……比如使用一些按鈕type="button"
,這樣它就不會立即提交并讓你應用你的邏輯……我想你可以自己找到其他的改變。
關于當用戶在模態之外單擊時模態關閉,您還有其他答案。;)
代碼筆
function editNav() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className = " responsive";
} else {
x.className = "topnav";
}
}
// DOM Elements
const modalbg = document.querySelector(".bground");
const modalBtn = document.querySelectorAll(".modal-btn");
const formData = document.querySelectorAll(".formData");
const modalBody = document.querySelector(".modal-body");
const form = document.getElementById("reserve");
const firstName = document.getElementById("first");
const lastName = document.getElementById("last");
const email = document.getElementById("email");
const birthdate = document.getElementById("birthdate");
const quantity = document.getElementById("quantity"); /* nombre de tournois*/
const city = document.getElementsByName("location");
// launch modal form
function launchModal() {
modalbg.style.display = "block";
}
// launch modal event
modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
// close modal form and reset datas in the form
function closeModal() {
modalbg.style.display = "none";
form.reset();
}
function submitForm(){
form.submit()
}
//close modal event
//modalBtn.forEach((btn) => btn.addEventListener("click", closeModal));
// form.addEventListener(
document.querySelector(".btn-validate").addEventListener("click",
// "submit",
validateForm
); /* when submit form => function validateform start*/
// fonction validation du formulaire.
/*si validatefrom n'est pas retournée,
alors fonction greetings est lancée*/
function validateForm(event) {
console.clear()
console.log("validation...")
event.preventDefault();
event.stopPropagation();
const conditions = [
validateFirstName(),
validateLastName(),
validateEmail(),
validateRadio(),
validateTournament(),
validateDate()
]
if (
conditions.filter((cond) => !cond).length
) {
console.log("Form invalid")
return;
}
console.log("Form valid")
greetings()
/* removeEventListener("submit", greetings())*/
}
/*
formIsValid();
function formIsValid() {
if (!validateForm()) {
greetings();
}
}
*/
//!!!! reste le rechargement de la modale avec message de remerciement
function greetings() {
console.log("greetings")
// form.innerHTML = /*html*/ `<div class ="content">
// Merci pour votre <br>inscription</div>
// <button onclick= "closeModal()">
// Fermer </button>`;
document.querySelector("#greetings").style.display = "block"
form.style.display = "none"
}
/**
* fonction validation du prénom et message erreur OK!!
*
* @return {Boolean} true si valide sinon false
*/
function validateFirstName() {
const regexFirstName = /^[A-Z a-z]{2,25}$/; /*min 2 caracteres*/
const parent = document.getElementById("first").parentNode;
if (firstName.value == "" || !regexFirstName.test(firstName.value)) {
firstName.focus();
parent.setAttribute("data-error", "Veuillez entrez un prénom valide");
parent.setAttribute("data-error-visible", "true");
return false;
}
parent.setAttribute("data-error-visible", "false");
return true;
}
//fonction validation du nom et message erreur OK!!!
function validateLastName() {
const regexLastName = /^[A-Z a-z]{2,25}$/; /*min 2 caracteres*/
const parent = document.getElementById("last").parentNode;
console.log(parent, "parent1");
if (lastName.value == "" || !regexLastName.test(lastName.value)) {
lastName.focus();
parent.setAttribute("data-error", "Veuillez entrez un nom valide");
parent.setAttribute("data-error-visible", "true");
return false;
}
parent.setAttribute("data-error-visible", "false");
return true;
}
//fonction validation du courriel et message erreur OK!!!
function validateEmail() {
const regexEmail =
/^[a-zA-Z][a-zA-Z0-9\-\_\.] @[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}$/;
const parent = document.getElementById("email").parentNode;
console.log(parent, "parent2");
console.log(email.value);
if (email.value == "" || !regexEmail.test(email.value)) {
email.focus();
parent.setAttribute("data-error", "Veuillez entrez un courriel valide");
parent.setAttribute("data-error-visible", "true");
return false;
}
parent.setAttribute("data-error-visible", "false");
return true;
}
function setDateLimits() {
const dateToday = new Date();
// console.log (dateToday);
const day = dateToday.getDate(); /* jour du mois en cours */
// console.log (day);
const month =
dateToday.getMonth()
1; /* mois de l'année en cours" 1" car renvoie "0" pour janvier*/
// console.log (month);
const year = dateToday.getFullYear(); /* année en cours*/
// console.log (year);
let date = new Date(`${year - 18}-${month}-${day}`)
.toISOString()
.split("T")[0];
console.log(birthdate, date);
birthdate.setAttribute("max", date);
date = new Date(`${year - 100}-${month}-${day}`).toISOString().split("T")[0];
console.log(birthdate, date);
birthdate.setAttribute("min", date);
}
function validateDate() {
const parent = birthdate.parentNode;
let isValid = true;
const selectedDate = new Date(birthdate.value);
const dateToday = new Date();
const day = dateToday.getDate(); /* jour du mois en cours */
const month =
dateToday.getMonth()
1; /* mois de l'année en cours" 1" car renvoie "0" pour janvier*/
const year = dateToday.getFullYear(); /* année en cours*/
let date = new Date(`${year - 18}-${month}-${day}`);
if (selectedDate > date) {
isValid = false;
} else {
date = new Date(`${year - 100}-${month}-${day}`);
if (selectedDate < date) {
isValid = false;
}
}
if (!isValid) {
birthdate.focus();
parent.setAttribute("data-error", "Veuillez entrez une date valide");
parent.setAttribute("data-error-visible", "true");
return false;
}
parent.setAttribute("data-error-visible", "false");
return true;
}
console.log(quantity.value);
//validation du champ nombre de tournois OK!!!
function validateTournament() {
const quantityTournament = document.querySelector("input[name='quantity']");
const parent = document
.querySelector(`input[name='quantity']`)
.closest(`.formData`);
console.log(parent);
if (quantityTournament.value == "" || null) {
quantity.focus();
parent.setAttribute("data-error", "Veuillez entrez un nombre");
parent.setAttribute("data-error-visible", "true");
return false;
}
parent.setAttribute("data-error-visible", "false");
return true;
}
// fonction validation de la ville (bouton radio) OK!!
function validateRadio() {
const checkradio = document.querySelector("input[name='location']:checked");
const parent = document
.querySelector(`input[name='location']`)
.closest(`.formData`);
console.log(parent, "parent");
if (checkradio != null) {
//Teste si une ville est cochée
parent.setAttribute("data-error-visible", "false");
return true;
}
parent.setAttribute("data-error", "Veuillez choisir une ville");
parent.setAttribute("data-error-visible", "true");
return false;
}
setDateLimits();
:root {
--font-default: "DM Sans", Arial, Helvetica, sans-serif;
--font-slab: var(--font-default);
--modal-duration: 0.8s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Landing Page */
body {
margin: 0;
display: flex;
flex-direction: column;
background-image: url("background.png");
font-family: var(--font-default);
font-size: 18px;
max-width: 1300px;
margin: 0 auto;
}
p {
margin-bottom: 0;
padding: 0.5vw;
}
img {
padding-right: 1rem;
}
.topnav {
overflow: hidden;
margin: 3.5%;
}
.header-logo {
float: left;
}
.main-navbar {
float: right;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 12px 12px;
margin: 5px;
text-decoration: none;
font-size: 20px;
font-family: Roboto, sans-serif;
}
.topnav a:hover {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav a.active {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
@media screen and (max-width: 540px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-top: -15px;
}
}
main {
font-size: 130%;
font-weight: bolder;
color: black;
padding-top: 0.5vw;
padding-left: 2vw;
padding-right: 2vw;
margin: 1px 20px 15px;
border-radius: 2rem;
text-align: justify;
}
.modal-btn {
font-size: 145%;
background: #fe142f;
display: flex;
margin: auto;
padding: 2em;
color: #fff;
padding: 0.75rem 2.5rem;
border-radius: 1rem;
cursor: pointer;
}
.modal-btn:hover {
background: #3876ac;
}
.footer {
margin: 20px;
padding: 10px;
font-family: var(--font-slab);
}
/* Modal form */
.button {
background: #fe142f;
margin-top: 0.5em;
padding: 1em;
color: #fff;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background: #3876ac;
}
.smFont {
font-size: 16px;
}
.bground {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(26, 39, 156, 0.4);
}
.content {
margin: 5% auto;
width: 100%;
max-width: 500px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
background: #232323;
border-radius: 10px;
overflow: hidden;
position: relative;
color: #fff;
padding-top: 10px;
}
.modal-body {
padding: 15px 8%;
margin: 15px auto;
}
label {
font-family: var(--font-default);
font-size: 17px;
font-weight: normal;
display: inline-block;
margin-bottom: 11px;
}
input {
padding: 8px;
border: 0.8px solid #ccc;
outline: none;
}
.text-control {
margin: 0;
padding: 8px;
width: 100%;
border-radius: 8px;
font-size: 20px;
height: 48px;
}
.formData[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: #e54858;
display: block;
margin-top: 7px;
margin-bottom: 7px;
text-align: right;
line-height: 0.3;
opacity: 0;
transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
border: 2px solid #e54858;
}
/*
input[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: red;
} */
.checkbox-label,
.checkbox2-label {
position: relative;
margin-left: 36px;
font-size: 12px;
font-weight: normal;
}
.checkbox-label .checkbox-icon,
.checkbox2-label .checkbox-icon {
display: block;
width: 20px;
height: 20px;
border: 2px solid #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: -30px;
top: -1px;
transition: 0.3s;
}
.checkbox-label .checkbox-icon::after,
.checkbox2-label .checkbox-icon::after {
content: "";
width: 13px;
height: 13px;
background-color: #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
opacity: 0;
}
.checkbox-input {
display: none;
}
.checkbox-input:checked .checkbox-label .checkbox-icon::after,
.checkbox-input:checked .checkbox2-label .checkbox-icon::after {
opacity: 1;
}
.checkbox-input:checked .checkbox2-label .checkbox-icon {
background: #279e7a;
}
.checkbox2-label .checkbox-icon {
border-radius: 4px;
border: 0;
background: #c4c4c4;
}
.checkbox2-label .checkbox-icon::after {
width: 7px;
height: 4px;
border-radius: 2px;
background: transparent;
border: 2px solid transparent;
border-bottom-color: #fff;
border-left-color: #fff;
transform: rotate(-55deg);
left: 21%;
top: 19%;
}
.close {
position: absolute;
right: 15px;
top: 15px;
width: 32px;
height: 32px;
opacity: 1;
cursor: pointer;
transform: scale(0.7);
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 33px;
width: 3px;
background-color: #fff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.btn-submit,
.btn-validate,
.btn-signup {
background: #fe142f;
display: block;
margin: 0 auto;
border-radius: 7px;
font-size: 1rem;
padding: 12px 82px;
color: #fff;
cursor: pointer;
border: 0;
}
/* custom select styles */
.custom-select {
position: relative;
font-family: Arial;
font-size: 1.1rem;
font-weight: normal;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #fff;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 10px;
right: 13px;
width: 11px;
height: 11px;
border: 3px solid transparent;
border-bottom-color: #f00;
border-left-color: #f00;
transform: rotate(-48deg);
border-radius: 5px 0 5px 0;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
transform: rotate(135deg);
top: 13px;
}
.select-items div,
.select-selected {
color: #000;
padding: 11px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
border-radius: 8px;
height: 48px;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: #fff;
top: 89%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* custom select end */
.text-label {
font-weight: normal;
font-size: 16px;
}
.hero-section {
min-height: 93vh;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(12, 1fr);
overflow: hidden;
box-shadow: 0 2px 7px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.hero-content {
padding: 51px 67px;
grid-column: span 4;
background: #232323;
color: #fff;
position: relative;
text-align: left;
min-width: 424px;
}
.hero-content::after {
content: "";
width: 100%;
height: 100%;
background: #232323;
position: absolute;
right: -80px;
top: 0;
}
.hero-content > * {
position: relative;
z-index: 1;
}
.hero-headline {
font-size: 6rem;
font-weight: normal;
white-space: nowrap;
}
.hero-text {
width: 146%;
font-weight: normal;
margin-top: 57px;
padding: 0;
}
.btn-signup {
outline: none;
text-transform: capitalize;
font-size: 1.3rem;
padding: 15px 23px;
margin: 0;
margin-top: 59px;
}
.hero-img {
grid-column: span 8;
}
.hero-img img {
width: 100%;
height: 100%;
display: block;
padding: 0;
}
.copyrights {
color: #fe142f;
padding: 0;
font-size: 1rem;
margin: 60px 0 30px;
font-weight: bolder;
}
.hero-section > .btn-signup {
display: none;
}
footer {
padding-left: 2vw;
padding-right: 2vw;
margin: 0 20px;
}
@media screen and (max-width: 800px) {
.hero-section {
display: block;
box-shadow: unset;
}
.hero-content {
background: #fff;
color: #000;
padding: 20px;
}
.hero-content::after {
content: unset;
}
.hero-content .btn-signup {
display: none;
}
.hero-headline {
font-size: 4.5rem;
white-space: normal;
}
.hero-text {
width: unset;
font-size: 1.5rem;
}
.hero-img img {
border-radius: 10px;
margin-top: 40px;
}
.hero-section > .btn-signup {
display: block;
margin: 32px auto 10px;
padding: 12px 35px;
}
.copyrights {
margin-top: 50px;
text-align: center;
}
}
@keyframes modalopen {
from {
opacity: 0;
transform: translateY(-150px);
}
to {
opacity: 1;
}
}
#greetings{
display: none;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Reservation</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="modal.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link
href="https://fonts.googleapis.com/css?family=DM Sans"
rel="stylesheet"
/>
</head>
<body>
<div class="topnav" id="myTopnav">
<div class="header-logo">
<img alt="logo" src="Logo.png" width="auto" height="auto" />
</div>
<div class="main-navbar">
<a href="#" class="active"><span>Accueil</span></a>
<a href="#"><span>Détails de l'évènement</span></a>
<a href="#"><span>à propos</span></a>
<a href="#"><span>Contact</span></a>
<a href="#"><span>évènements passés</span></a>
<a href="javascript:void(0);" class="icon" onclick="editNav()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
</div>
<main>
<div class="hero-section" >
<div class="hero-content">
<h1 class="hero-headline">
Marathon national<br>
de jeux vidéos
</h1>
<p class="hero-text">
Vous aimez jouer ? Notre prochain évènement gaming est ouvert
aux réservations... Places limitées !
</p>
<button class="btn-signup modal-btn">
je m'inscris
</button>
</div>
<div class="hero-img">
<img src="./bg_img.jpg" alt="img" />
</div>
<button class="btn-signup modal-btn">
je m'inscris
</button>
</div>
<div class="bground"><!--ouverture et fermeture modale en js-->
<div class="content" >
<span class="close" onclick = closeModal()></span>
<div class="modal-body">
<div id="greetings">
<div class ="content">
Merci pour votre <br>inscription
</div>
<button type="button" class="btn-submit" onclick= "submitForm()"> Fermer </button>
</div>
<!--ajout id tag "reserve"pour le formulaire-->
<form
name="reserve"
id="reserve"
action="index.html"
method="get">
<div
class="formData">
<label>Prénom</label><br>
<input
class="text-control"
type="text"
id="first"
name="first"
minlength="2"
>
</div>
<div
class="formData">
<label>Nom</label><br>
<input
class="text-control"
type="text"
id="last"
name="last"
/><br>
</div>
<div
class="formData">
<label>E-mail</label><br>
<input
class="text-control"
type="email"
id="email"
name="email"
/><br>
</div>
<!--le navigateur comprend la date et affiche un calendrier-->
<div
class="formData">
<label>Date de naissance</label><br>
<input
class="text-control"
type="date"
id="birthdate"
name="birthdate"
/><br>
</div>
<div
class="formData">
<label>à combien de tournois GameOn avez-vous déjà participé ?</label><br>
<input type="number" class="text-control" id="quantity" name="quantity" min="0" max="99">
</div>
<p class="text-label">A quel tournoi souhaitez-vous participer cette année ?</p>
<div
class="formData">
<input
class="checkbox-input"
type="radio"
id="location1"
name="location"
value="New York"
/>
<label class="checkbox-label" for="location1">
<span class="checkbox-icon"></span>
New York</label
>
<input
class="checkbox-input"
type="radio"
id="location2"
name="location"
value="San Francisco"
/>
<label class="checkbox-label" for="location2">
<span class="checkbox-icon"></span>
San Francisco</label
>
<input
class="checkbox-input"
type="radio"
id="location3"
name="location"
value="Seattle"
/>
<label class="checkbox-label" for="location3">
<span class="checkbox-icon"></span>
Seattle</label
>
<input
class="checkbox-input"
type="radio"
id="location4"
name="location"
value="Chicago"
/>
<label class="checkbox-label" for="location4">
<span class="checkbox-icon"></span>
Chicago</label
>
<input
class="checkbox-input"
type="radio"
id="location5"
name="location"
value="Boston"
/>
<label class="checkbox-label" for="location5">
<span class="checkbox-icon"></span>
Boston</label
>
<input
class="checkbox-input"
type="radio"
id="location6"
name="location"
value="Portland"
/>
<label class="checkbox-label" for="location6">
<span class="checkbox-icon"></span>
Portland</label
>
<br><small></small>
</div>
<div
class="formData">
<input
class="checkbox-input"
type="checkbox"
id="checkbox1"
checked
/>
<label class="checkbox2-label" for="checkbox1" required>
<span class="checkbox-icon"></span>
J'ai lu et accepté les conditions d'utilisation.
</label>
<br>
<small></small>
<input class="checkbox-input" type="checkbox" id="checkbox2" />
<label class="checkbox2-label" for="checkbox2">
<span class="checkbox-icon"></span>
Je souhaite être prévenu des prochains évènements.
</label>
<br>
</div>
<input
class="btn-validate"
type="button"
class="button"
value="C'est parti"
/>
</form>
</div>
</div><!--fin content -->
</div>
</main>
<footer>
<p class="copyrights">
Copyright 2014 - 2022, GameOn Inc.
</p>
</footer>
<script src= "modal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/528271.html
上一篇:新的類實體,直到在JS中滿足條件
下一篇:使用函式在一張圖表中繪制多條線