在主页之前联系我们弹出窗口

Question

我有一个Index.html页面，用户点击home.html页面上的“输入网站”链接。

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

我不知道怎么做，除了我知道需要jquery / java脚本。如果有人可以帮我处理上述代码，我们将不胜感激。

提前致谢。

Answer 1

我认为你只是要求一些大方向 - 而不是有人为你编写所有代码，我不会讨论这是否是一个好主意UI智慧。请参阅有关所有相关信息的评论 - 有效点。

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

http://fancybox.net

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

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

理想情况下，您可以在成功的ajax表单提交上关闭该框，但这是一个快速而简单的解决方案，可以很好地为您工作。同样，我不打算在这里写下所有内容，但希望它能让您对可行的解决方案有一个大概的了解。

Answer 2

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

Answer 3

我建议你看一下ShadowBox插件。

它可以完全按照您的要求进行操作，并且安装和使用起来相当容易。

ShadowBox