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

【问题标题】：How to make an modal with ejs and node如何使用 ejs 和 node 制作模态框
【发布时间】：2020-04-21 04:45:22
【问题描述】：

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

调用函数的按钮：

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

功能：

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

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

【问题讨论】：

标签： javascript html node.js ejs

【解决方案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>
<% } %>

【讨论】：

哦，谢谢你的回答！很高兴知道这没有意义，我想这就是为什么我在谷歌上没有找到类似的东西。