Как открыть и закрыть модальное окно через 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();}
Спасибо вам еще раз!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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();
}
хорошо, отлично, пожалуйста, отметьте как ответ
Проблема в вашем коде заключается в следующем:
if (launchConfirmationMessage() = true && closeConfirmationMessage() === false){
// ...
}
Ошибок больше одной:
- Функции, которые вы вызываете, не имеют возвращаемых значений, поэтому
closeConfirmationMessage() === falseникогда не будет истинным, аlaunchConfirmationMessage() = trueтакже - Вы пытаетесь назначить
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, и он мне очень помог!
Добро пожаловать @WillemJOURET Вы можете спросить :-). Если вы хотите показать людям, что их ответ помог вам, вы можете пометить сообщение как принятый ответ и / или проголосовать за него.
Сначала ваше утверждение 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());
PS: значение (isOk) верно