logo标签列表

在内容上方显示一个包含表单的div

javascriptjquery
4
我相信这个问题以前已经被问过，但我的谷歌搜索技术无法找到答案。
我有一个内容页面，希望当用户按下链接或按钮时，在内容上方出现一个表单。一旦填写并提交，它就会被传递给ajax进行处理。
我相信这个问题以前已经解决过了，因为我在网站上看到过。有没有简单的方法来做到这一点，比如使用jquery插件或其他javascript API？
或者我需要手动编写div中的表单，在css中覆盖它的z-index并将其隐藏。然后当它被调用时让表单出现？
最简单的解决方法是什么？非常感谢！
5个回答
3
1
你可以写一些 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>
当然，如果您不想使用mega/awesome/best-box插件^^ - Pavel Morshenyuk
1
你可以看一下FancyBox插件（最初是用于显示图片，但也可以用于表单）。
请查看此链接：http://fancybox.net/blog，在页面中间找到“5. 显示登录表单”示例。
1

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

只需搜索“jquery lightbox”即可。

1

我同意其他人的观点：你想要类似于[厚|轻|颜色|花哨|...]的框。所以，提到我的最爱解决方案：http://nyromodal.nyrodev.com/#demos

好处是，你可以让它像一个iframe一样运行，并简单地传递要显示的表单的URL..

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接