如何在 Node.js/Jade 模板中创建弹出联系表单？

Question

如何创建一个当用户单击 Jade 模板上的按钮时弹出的表单？我在 HTML 中尝试了以下方法，它有效：

http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/

现在要在我的 Node.js 项目中使用它，我需要为表单本身创建一个单独的 Jade 文件吗？这就是我尝试过的，然后我尝试显示这样的表格：

function div_show() {
    alert("Test");
    document.getElementById('abc').style.display = "block";
}

不幸的是，这不起作用。在 Jade 中创建弹出窗体的推荐方法是什么？我真的对 Jade 很困惑，我似乎找不到一个很好的教程，有 HTML...

的负载

感谢您的帮助！

Answer 1

通常你会使用：
document.getElementById('abc').style.visibility="visible";

要隐藏你的 table 使用：
document.getElementById('abc').style.visibility="hidden";

使用 'style' 属性时，您使用的是简单的 css 命令。确保你的默认 div 样式设置有它 'hidden'，如果这是你想要的。

This display:block;visibility:hidden;'该 div 样式必须存在于您的默认设置中，以便 DOM 有明确的路径指向它所控制的内容。 'display:block;' 本身不会隐藏或使对象可见，它主要是关于 div 作为对象容器创建的形状。

作为一个选项，您可以使用：
document.getElementById('abc').style.display="block";

要隐藏你的 table 使用：
document.getElementById('abc').style.display="none";

为此，您可以将 div 样式设置设置为 'display:none;visibility:visible;.
在这种情况下，'display="none"' 从所有显示层中删除该对象，并允许其他对象填充它的 space。当它可见时，它会将同一 z-index 上的其他对象推开。如果它有更高的 z-index，比如说高 +100，它将弹出到页面上其他对象的上方。

'visibility' 属性只控制对象的可见性，它不会将其从显示内存中删除。即使它不可见，它仍然可以占用 space。 'opacity' 属性的作用大致相同，只是它还允许您根据需要使对象透明。

如何在 Node.js/Jade 模板中创建弹出联系表单？

How to create a pop up contact form in Node.js/Jade Template?

html

node.js

pug