Как открыть и закрыть модальное окно через 3 секунды без Bootstrap или Jquery

Я новичок в изучении JavaScript, и я пытаюсь открыть и закрыть пользовательское сообщение через 3 секунды после появления, но моя функция не работает. Сообщение появляется, но не исчезает... не могли бы вы помочь мне найти решение, потому что я не могу найти его в одиночку. Большое спасибо !

const confirmationMessage = document.getElementById("message_validation");

// launch confirmationMessage form 
const launchConfirmationMessage = () => {
  confirmationMessage.style.display = "flex";
}

//close confirmationMessage form
const closeConfirmationMessage = () => {
  confirmationMessage.style.display = "none";
}

// TimeOut du confirmationMessage
const timeOutConfirmMess = () => {
  setTimeout(closeConfirmationMessage, 3000);
}


// open and close window after 3s
function confirm() {
  if (launchConfirmationMessage() = true && closeConfirmationMessage() === false) {
    timeOutConfirmMess();
  }
}
console.info(confirm());
.message-validation {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 13%;
  top: 41%;
  overflow: auto;
  background-color: rgba(26, 39, 156, 0.9);
  color: white;
  padding: 5%;
  border-radius: 5px;
}
<div id = "message_validation" class = "message-validation">
  Bravo! Votre réservation est prise en compte.
</div>

Кроме того, в основном элемент css находится в состоянии display:none, и во время условия он становится display:block как это:

if (isOk){ confirm();}

Спасибо вам еще раз!

PS: значение (isOk) верно

Willem JOURET 05.05.2022 19:07
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
35
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

позвоните setTimeout с 3000 миллисекундами, и вы сразу же покажете подтверждение. Таким образом, функция закрытия будет вызвана через 3 секунды. Следовательно, функция confirm не нужна, поэтому я ее удалил. Следующие работы.

const confirmationMessage = document.getElementById("message_validation");

// launch confirmationMessage form 
const launchConfirmationMessage = () => {
  confirmationMessage.style.display = "flex";
  setTimeout(closeConfirmationMessage, 3000);
}

//close confirmationMessage form
const closeConfirmationMessage = () => {
 confirmationMessage.style.display = "none";
}

launchConfirmationMessage();
.message-validation{
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 13%;
  top: 41%;
  overflow: auto;
  background-color: rgba(26, 39, 156, 0.9);
  color: white;
  padding: 5%;
  border-radius: 5px;
}
 <div id = "message_validation" class = "message-validation">
   Bravo! Votre réservation est prise en compte.
 </div>

Кроме того, в вашей функции confirm этот оператор if никогда не вернет true, потому что функции не возвращают логические значения.

Поэтому вместо использования функции confirm. Просто вызовите launchConfirmationMessage, когда isOk верно. Я сразу назвал его во фрагменте, чтобы вы увидели, что он работает, но в вашей кодовой базе вы можете вместо этого использовать следующее.

if (isOk) {
  launchConfirmationMessage();
}

хорошо, отлично, пожалуйста, отметьте как ответ

Obumuneme Nwabude 05.05.2022 22:13

Проблема в вашем коде заключается в следующем:

if (launchConfirmationMessage() = true && closeConfirmationMessage() === false){ 
  // ... 
}

Ошибок больше одной:

  1. Функции, которые вы вызываете, не имеют возвращаемых значений, поэтому closeConfirmationMessage() === false никогда не будет истинным, а launchConfirmationMessage() = true также
  2. Вы пытаетесь назначить true вызову launchConfirmationMessage: Здесь только один знак равенства вместо двух или трех

Ниже приведен ваш код, слегка исправленный:

const confirmationMessage = document.getElementById("message_validation");

// launch confirmationMessage form 
const launchConfirmationMessage = () => {
  confirmationMessage.style.display = "flex";
}

//close confirmationMessage form
const closeConfirmationMessage = () => {
  confirmationMessage.style.display = "none";
}

// TimeOut du confirmationMessage
const timeOutConfirmMess = () => {
  setTimeout(closeConfirmationMessage, 3000);
}


// open and close window after 3s
function confirm() {
  launchConfirmationMessage();
  
  timeOutConfirmMess();
}
console.info(confirm());
.message-validation {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 13%;
  top: 41%;
  overflow: auto;
  background-color: rgba(26, 39, 156, 0.9);
  color: white;
  padding: 5%;
  border-radius: 5px;
}
<div id = "message_validation" class = "message-validation">
  Bravo! Votre réservation est prise en compte.
</div>

Всем большое спасибо! Это был мой первый вопрос на StackOverFlow, и он мне очень помог!

Willem JOURET 05.05.2022 21:39

Добро пожаловать @WillemJOURET Вы можете спросить :-). Если вы хотите показать людям, что их ответ помог вам, вы можете пометить сообщение как принятый ответ и / или проголосовать за него.

Apollo79 06.05.2022 14:00
Ответ принят как подходящий

Сначала ваше утверждение if неверно. В операторе if вы всегда сравниваете две вещи и используете "==" или "===". Вы также не возвращаете никаких значений в своей вспомогательной функции.

Для этого кода я бы не рекомендовал вспомогательную функцию, приведенный ниже код будет работать.

const confirmationMessage = document.getElementById("message_validation");
// open and close window after 3s
function confirm () {
  confirmationMessage.style.display = "flex";
  setTimeout(() => {
      confirmationMessage.style.display = "none";
  }, 3000)

}
  console.info(confirm());

Другие вопросы по теме