如何在jade模板中使用jquery或angularjs创buildpopup窗口
我正在使用带有Jade模板的Express框架。 我的问题是，我想添加一个popup。 我有jQuery和Angular。 我已经尝试了nodejs的窗口popupnpm，但它不符合我的要求。 我想显示一个button点击popup。
您可以将onclick处理程序附加到链接，然后打开一个popup窗口。
a(href="http://link-to-open.com/" onclick="window.open(this.href);return false;") Open Popup
在我正在进行的一个最近的项目中，需要确认popup窗口来确认用户是否想要删除某些东西。 由于这是唯一的客户端UI交互，移动到browserify和watchify的开销远远大于所需的任务。 所以这不是使用angular或jquery，而是一个基于NPM的插件。
然而， 它实现了使用Node Express和Jade创build服务器端的任务。
首先，在npm版本库中select了一个popup式插件。 selectpopupS是一个基于NPM的插件，它使用browserify进行编译和使用。
该插件可以从以下获得：对于Node.js + Browserify安装：
npm install popupS --save
然而，目前使用browserify的范围，所以插件是从gitHub回购获得。 以下步骤确定了如何使用Jade，Express和Node在服务器端代码中包含popup窗口：
在Node app根文件夹中findapp.js文件，并确保存在如下代码片段：
var express = require('express'); var path = require('path'); var app = express(); app.use(express.static(path.join(__dirname, 'public')));
该代码行使用express.static为静态文件设置文件夹。 然后在Node应用程序的根文件夹中的公共目录中创build一个js文件夹。
然后：
cd /public/js wget https://raw.githubusercontent.com/ChiefORZ/popupS/master/dist/popupS.min.js cd ../css wget https://raw.githubusercontent.com/ChiefORZ/popupS/master/css/popupS.min.css
然后在包含Jade文件的应用程序视图中，find应用程序的index.jade或layout.jade文件，其中body和head标签位于该文件中。 可以说头在layout.jade ，在layout.jade添加以下行：
link(rel='stylesheet', href='/stylesheets/popupS.min.css') script(src="/js/popupS.min.js")
然后在popup窗口需要出现的Jade文件中添加一个button，并在onClick事件中调用一个js函数，这个函数依次创buildpopup窗口。 以下代码显示了这一点：
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
当用户点击button“Delete with conf”时，该function被调用，然后popup窗口，询问用户确认。 如果用户确认浏览器被redirect到删除用户对象的路由，否则什么都不会发生。 popup窗口如下所示： 
即使UI逻辑不应该在Jade中，现在只有20行代码，应用程序中仍然有popup窗口，而没有使用browserify的开销！
我创build的原始blogpost在这里： Node Express Jadepopup窗口