javascript - 主页前的联系我们弹出窗口

Question

我有一个 Index.html 页面，用户单击该页面上的“进入站点”链接，该链接位于 home.html 页面上。

我希望一旦有人单击“进入站点”，home.html 页面就会出现褪色显示，并且 home.html 页面顶部将显示与我们联系（带有姓名、电话和电子邮件）弹出窗口。用户提交此表单后，home.html 页面将被显示，并且弹出窗口将消失。

我不知道该怎么做，除了我知道 jquery/java 脚本是必需的。如果有人可以帮助我完成上述代码，将不胜感激。

提前致谢。

score 1 · Accepted Answer

我假设您只是在询问一些总体方向 - 并不是有人为您编写所有代码，我不会讨论这是否是一个好主意 UI 明智。有关所有这些信息的信息，请参见评论 - 有效点。

我建议你考虑使用流行的“fancybox”jQuery 插件：

该插件主要用于照片，但您也可以将其用于 HTML 内容，例如“联系我们”表单。然后，您需要使用 Fancybox 方法“ $.fancybox.close ”在提交表单后关闭该框 - 可能通过劫持表单提交事件，如下所示：

 $('#some-form').on('submit', function(e) {
      e.preventDefault();
      $('#some-fancy-box').close();
 });

理想情况下，您会在成功提交 ajax 表单时关闭该框，但这是一个快速简单的解决方案，对您来说效果很好。同样，我不会在这里全部写完，但希望它能让您大致了解可行的解决方案。

score 0 · Accepted Answer

看看 JQuery-ui 对话框功能。这似乎是您问题的解决方案。 http://jqueryui.com/dialog/

score 0 · Accepted Answer

我建议你看看 ShadowBox 插件。

它可以完全满足您的需求，并且安装和使用相当容易。

3 回答 3