如何在没有引导或Jquery的情况下在3秒后打开和关闭一个模态

Question

我是新的学习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.log(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();}

再次感谢您!

Answer 1

首先你的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.log(confirm());

Answer 2

代码中的问题是if子句:

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.log(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>

Answer 3

在显示confirmationMessage后立即用3000毫秒调用setTimeout。这样，close函数将在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函数。当isOk为true时，只需调用launchConfirmationMessage。我在代码片段中立即调用它，以便您看到它是如何工作的，但是在您的代码库中，您可以使用以下代码。

if (isOk) {
launchConfirmationMessage();
}