如何使用ejs和node制作模态框

Question

我正在尝试学习一些 ejs 和 node，我知道我可以轻松地创建一个仅使用 JS 和 HTML 的弹出模式，就像这样，当我单击某个按钮时调用一个函数

调用函数的按钮：

<button id="myBtn">Open Modal</button>

功能：

btn.onclick = function() {
   modal.style.display = "block";
}

但是我如何使用 Ejs 和 NodeJs 来做到这一点呢？

Answer 1

使用 EJS 和 Node 来执行此操作没有意义。在这种情况下，这些是用于运行服务器端代码的工具。使用现有的 JS 作为客户端 JavaScript（在从 EJS 生成的 HTML 文档中）更有意义。

也就是说，如果您确实想在服务器端执行此操作，那么您需要在 HTML 中使用类似以下内容：

<form method="post">
    <button name="modal" value="open">Open Modal</button>
</form>

然后（假设您使用的是 Express JS）类似：

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded());
app.post("/your/page", function (req, res) {
    const show_modal = !!req.body.modal; // Cast to boolean
    res.render("page", { show_modal });
}

然后在 EJS 中：

<% if (show_modal) { %>
    <div id="modal" style="display: block">
        etc
    </div>
<% } %>