主頁 > 作業系統 > 卡在javascript的關閉模式問題上

卡在javascript的關閉模式問題上

2022-11-07 22:03:35 作業系統

這是我的問題的代碼: 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
   }
})

(也許您應該僅在模態打開時添加此事件偵聽器,然后在模態關閉時將其洗掉)

您可以在此處閱讀更多資訊.closesthttps ://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

標籤:javascripthtmlcss功能if 语句

上一篇:新的類實體,直到在JS中滿足條件

下一篇:使用函式在一張圖表中繪制多條線

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • CA和證書

    1、在 CentOS7 中使用 gpg 創建 RSA 非對稱密鑰對 gpg --gen-key #Centos上生成公鑰/密鑰對(存放在家目錄.gnupg/) 2、將 CentOS7 匯出的公鑰,拷貝到 CentOS8 中,在 CentOS8 中使用 CentOS7 的公鑰加密一個檔案 gpg -a ......

    uj5u.com 2020-09-10 00:09:53 more
  • Kubernetes K8S之資源控制器Job和CronJob詳解

    Kubernetes的資源控制器Job和CronJob詳解與示例 ......

    uj5u.com 2020-09-10 00:10:45 more
  • VMware下安裝CentOS

    VMware下安裝CentOS 一、軟硬體準備 1 Centos鏡像準備 1.1 CentOS鏡像下載地址 下載地址 1.2 CentOS鏡像下載程序 點擊下載地址進入如下圖的網站,選擇需要下載的版本,這里選擇的是Centos8,點擊如圖所示。 決定選擇Centos8后,選擇想要的鏡像源進行下載,此 ......

    uj5u.com 2020-09-10 00:12:10 more
  • 如何使用Grep命令查找多個字串

    如何使用Grep 命令查找多個字串 大家好,我是良許! 今天向大家介紹一個非常有用的技巧,那就是使用 grep 命令查找多個字串。 簡單介紹一下,grep 命令可以理解為是一個功能強大的命令列工具,可以用它在一個或多個輸入檔案中搜索與正則運算式相匹配的文本,然后再將每個匹配的文本用標準輸出的格式 ......

    uj5u.com 2020-09-10 00:12:28 more
  • git配置http代理

    git配置http代理 經常遇到克隆 github 慢的問題,這里記錄一下幾種配置 git 代理的方法,解決 clone github 過慢。 目錄 git配置代理 git單獨配置github代理 git配置全域代理 配置終端環境變數 git配置代理 主要使用 git config 命令 git單獨 ......

    uj5u.com 2020-09-10 00:12:33 more
  • Linux npm install 裝包時提示Error EACCES permission denied解

    npm install 裝包時提示Error EACCES permission denied解決辦法 ......

    uj5u.com 2020-09-10 00:12:53 more
  • Centos 7下安裝nginx,使用yum install nginx,提示沒有可用的軟體包

    Centos 7下安裝nginx,使用yum install nginx,提示沒有可用的軟體包。 18 (flaskApi) [root@67 flaskDemo]# yum -y install nginx 19 已加載插件:fastestmirror, langpacks 20 Loading ......

    uj5u.com 2020-09-10 00:13:13 more
  • Linux查看服務器暴力破解ssh IP

    在公網的服務器上經常遇到別人爆破你服務器的22埠,用來挖礦或者干其他嘿嘿嘿的事情~ 這種情況下正確的做法是: 修改默認ssh的22埠 使用設定密鑰登錄或者白名單ip登錄 建議服務器密碼為復雜密碼 創建普通用戶登錄服務器(root權限過大) 建立堡壘機,實作統一管理服務器 統計爆破IP [root ......

    uj5u.com 2020-09-10 00:13:17 more
  • CentOS 7系統常見快捷鍵操作方式

    Linux系統中一些常見的快捷方式,可有效提高操作效率,在某些時刻也能避免操作失誤帶來的問題。 ......

    uj5u.com 2020-09-10 00:13:31 more
  • CentOS 7作業系統目錄結構介紹

    作業系統存在著大量的資料檔案資訊,相應檔案資訊會存在于系統相應目錄中,為了更好的管理資料資訊,會將系統進行一些目錄規劃,不同目錄存放不同的資源。 ......

    uj5u.com 2020-09-10 00:13:35 more
最新发布
  • vim的常用命令

    Vim的6種基本模式 1. 普通模式在普通模式中,用的編輯器命令,比如移動游標,洗掉文本等等。這也是Vim啟動后的默認模式。這正好和許多新用戶期待的操作方式相反(大多數編輯器默認模式為插入模式)。 2. 插入模式在這個模式中,大多數按鍵都會向文本緩沖中插入文本。大多數新用戶希望文本編輯器編輯程序中一 ......

    uj5u.com 2023-04-20 08:43:21 more
  • vim的常用命令

    Vim的6種基本模式 1. 普通模式在普通模式中,用的編輯器命令,比如移動游標,洗掉文本等等。這也是Vim啟動后的默認模式。這正好和許多新用戶期待的操作方式相反(大多數編輯器默認模式為插入模式)。 2. 插入模式在這個模式中,大多數按鍵都會向文本緩沖中插入文本。大多數新用戶希望文本編輯器編輯程序中一 ......

    uj5u.com 2023-04-20 08:42:36 more
  • docker學習

    ###Docker概述 真實專案部署環境可能非常復雜,傳統發布專案一個只需要一個jar包,運行環境需要單獨部署。而通過Docker可將jar包和相關環境(如jdk,redis,Hadoop...)等打包到docker鏡像里,將鏡像發布到Docker倉庫,部署時下載發布的鏡像,直接運行發布的鏡像即可。 ......

    uj5u.com 2023-04-19 09:26:53 more
  • 設定Windows主機的瀏覽器為wls2的默認瀏覽器

    這里以Chrome為例。 1. 準備作業 wsl是可以使用Windows主機上安裝的exe程式,出于安全考慮,默認情況下改功能是無法使用。要使用的話,終端需要以管理員權限啟動。 我這里以Windows Terminal為例,介紹如何默認使用管理員權限打開終端,具體操作如下圖所示: 2. 操作 wsl ......

    uj5u.com 2023-04-19 09:25:49 more
  • docker學習

    ###Docker概述 真實專案部署環境可能非常復雜,傳統發布專案一個只需要一個jar包,運行環境需要單獨部署。而通過Docker可將jar包和相關環境(如jdk,redis,Hadoop...)等打包到docker鏡像里,將鏡像發布到Docker倉庫,部署時下載發布的鏡像,直接運行發布的鏡像即可。 ......

    uj5u.com 2023-04-19 09:19:04 more
  • Linux學習筆記

    IP地址和主機名 IP地址 ifconfig可以用來查詢本機的IP地址,如果不能使用,可以通過install net-tools安裝。 Centos系統下ens33表示主網卡;inet后表示IP地址;lo表示本地回環網卡; 127.0.0.1表示代指本機;0.0.0.0可以用于代指本機,同時在放行設 ......

    uj5u.com 2023-04-18 06:52:01 more
  • 解決linux系統的kdump服務無法啟動的問題

    問題:專案麒麟系統服務器的kdump服務無法啟動,沒有相關日志無法定位問題。 1、查看服務狀態是關閉的,重啟系統也無法啟動 systemctl status kdump 2、修改grub引數,修改“crashkernel”為“512M(有的機器數值太大太小都會導致報錯,建議從128M開始試,或者加個 ......

    uj5u.com 2023-04-12 09:59:50 more
  • 解決linux系統的kdump服務無法啟動的問題

    問題:專案麒麟系統服務器的kdump服務無法啟動,沒有相關日志無法定位問題。 1、查看服務狀態是關閉的,重啟系統也無法啟動 systemctl status kdump 2、修改grub引數,修改“crashkernel”為“512M(有的機器數值太大太小都會導致報錯,建議從128M開始試,或者加個 ......

    uj5u.com 2023-04-12 09:59:01 more
  • 你是不是暴露了?

    作者:袁首京 原創文章,轉載時請保留此宣告,并給出原文連接。 如果您是計算機相關從業人員,那么應該經歷不止一次網路安全專項檢查了,你肯定是收到過資訊系統技術檢測報告,要求你加強風險監測,確保你提供的系統服務堅實可靠了。 沒檢測到問題還好,檢測到問題的話,有些處理起來還是挺麻煩的,尤其是線上正在運行的 ......

    uj5u.com 2023-04-05 16:52:56 more
  • 細節拉滿,80 張圖帶你一步一步推演 slab 記憶體池的設計與實作

    1. 前文回顧 在之前的幾篇記憶體管理系列文章中,筆者帶大家從宏觀角度完整地梳理了一遍 Linux 記憶體分配的整個鏈路,本文的主題依然是記憶體分配,這一次我們會從微觀的角度來探秘一下 Linux 內核中用于零散小記憶體塊分配的記憶體池 —— slab 分配器。 在本小節中,筆者還是按照以往的風格先帶大家簡單 ......

    uj5u.com 2023-04-05 16:44:11 more