Node.js 如何使用jquery或angularjs在jade模板中创建弹出窗口

我正在使用带有Jade模板的Express框架。我的问题是，我想添加一个弹出窗口。我有jQuery和Angular。我已经尝试了nodejs的窗口弹出npm，但它不符合我的要求。我想在单击按钮时显示弹出窗口。

您可以将

onclick

处理程序附加到链接，然后打开弹出窗口

a(href="http://link-to-open.com/" onclick="window.open(this.href);return false;") Open Popup

---

在我最近的一个项目中，需要一个确认弹出窗口来确认用户是否想要删除某些内容。由于这是唯一的客户端UI交互，因此转移到browserify和watchify的开销远远大于所需的任务所以这不是使用angular或jquery，而是使用基于NPM的插件。

然而，它通过Node Express和Jade实现了创建服务器端POUP的任务。

首先，在npm存储库中选择了一个弹出窗口插件。选择的是popupS，一个基于NPM的插件，它使用browserify进行编译和使用

该插件可从以下网站获得： 对于Node.js+Browserify安装：

npm install popupS --save

然而，目前使用browserify不在范围之内，因此该插件是从gitHub repo获得的。以下步骤确定了如何使用Jade、Express和Node在服务器端代码中包含弹出窗口：

在节点app root文件夹中找到app.js文件，并确保存在如下代码段：

var express = require('express');
var path = require('path');
var app = express();
app.use(express.static(path.join(__dirname, 'public')));

代码行使用express.static为静态文件设置文件夹。然后在节点应用程序根文件夹的公共目录中，创建一个js文件夹

然后：

然后在包含Jade文件的应用程序视图中，找到应用程序的index.Jade或layout.Jade文件，即

主体

和

头部

标记所在的位置。 假设头部在

布局中。jade

，在其中添加以下行：

link(rel='stylesheet', href='/stylesheets/popupS.min.css')
script(src="/js/popupS.min.js")

然后在弹出窗口需要出现的Jade文件中添加一个按钮，该按钮带有调用js函数的onClick事件，该函数依次创建弹出窗口。下面的代码显示了这一点：

script.
     function popup() {
         popupS.confirm({
             content: 'Do you want to delete #{user.userName}?',
             labelOk: 'Yes',
             labelCancel: 'No',
             onSubmit: function() {
                 window.location.href = "/users/removeUser/#{user._id}"
             },
             onClose: function() {
                 console.log(':(');
             }
        });
     }
td
button(onclick="popup()") Delete with conf

当用户单击“使用配置删除”按钮时，会调用该函数，然后会显示一个弹出窗口，要求用户确认。如果用户确认浏览器重定向到删除用户对象的路由，否则不会发生任何事情。 弹出窗口如下所示：

即使UI逻辑不应该在Jade中，现在只有20行代码，应用程序中也有弹出窗口，而不需要使用browserify

---

我创建的原始博文如下：

hey@Magedev12345您尝试过建议的解决方案吗？嗨，andrea-f首先感谢您的博文。我现在已经开始使用ejs模板了。所以我没有机会。

script.
     function popup() {
         popupS.confirm({
             content: 'Do you want to delete #{user.userName}?',
             labelOk: 'Yes',
             labelCancel: 'No',
             onSubmit: function() {
                 window.location.href = "/users/removeUser/#{user._id}"
             },
             onClose: function() {
                 console.log(':(');
             }
        });
     }
td
button(onclick="popup()") Delete with conf