Question

我确信此前已被问到，但我的谷歌无法找到答案。

我有一页内容，我希望如此，当用户按下链接或按钮时，表单会显示在内容的顶部。一旦填写完并提交，它将被传递给ajax进行处理。

我确信在我在网站上看到它之前已经解决了这个问题。有没有一种简单的方法可以做到这一点，比如jquery插件或其他javascript API？

或者我必须手动在div中编写表单，用css中的z-index覆盖它并隐藏它。然后当它被调用时，表格会出现吗？

解决这个问题的最简单方法是什么？非常感谢

Answer 1

听起来你正在寻找一个模式弹出窗口，它通过HTTP请求从服务器获取表单。

网上有很多例子。查看jQuery ThickBox：http://jquery.com/demo/thickbox/

更好的是，这是一个包含30多个示例的页面：http://www.dottony.com/30-useful-ajax-lightbox-and-modal-dialog-solutions/

Answer 2

您可以查看FancyBox插件（最初用于显示图片，但也可用于表单）。
请参阅此链接：http://fancybox.net/blog，在页面中间查找“5.显示登录表单”示例。

Answer 3

尝试任何允许Ajax内容的优秀jQuery“lightbox”类型插件。

只需搜索“jquery lightbox。”

Answer 4

您可以编写一些CSS，以绝对定位在顶部显示您的表单。类似的东西：

#inputForm {
position: absolute;
top: 10px;
left: 100px;
width: 300px;
height: 200ps;
}

然后使用以下标记：

<html>
    <head>
    </head>
    <body>
        <div>
            Click to login <input type="button" id="btnLogin" />
        </div>
        <div id="inputForm" style="display:none;">
            <!-- your form controls -->
            <input type="button" id="btnSubmit" />
        </div>
        <script language="javascript" type="text/javascript">
            $(document).ready(function() {
                $('#btnLogin').click(function() {
                     $('#inputForm').show();
                });
                $('#btnSubmit').click(function() {
                         $('#inputForm').hide();
                         // collect form data
                         // make your AJAX request
                });
            });
        </script>
    </body>
</html>

Answer 5

我同意其他人的意见：你想要像[厚|光|颜色|花式| ...] - 盒子这样的东西。所以，提一下我最喜欢的解决方案：http://nyromodal.nyrodev.com/#demos

好的是，你可以让它表现得像iframe，只需将网址传递给你想要展示的表格。

在内容的顶部显示一个form-in-a-div

5 个答案: