admin管理员组

文章数量:1356229

I am sure this has been asked before but my google-fu was not able to find an answer.

I have a page of content and I want it so when a user presses a link or a button a form appears on top of the content. Once filled out and submitted it would get passed on to the ajax to process it.

I am sure this has been solved before as I've seen it on websites. Is there a simple way to do this, such as a jquery plugin or another javascript API?

Or would I have to write the form in the div by hand, overlay it with z-index in css and hide it. And then when it is called have the form appear?

What's the easiest way to solve this? Thanks a lot

I am sure this has been asked before but my google-fu was not able to find an answer.

I have a page of content and I want it so when a user presses a link or a button a form appears on top of the content. Once filled out and submitted it would get passed on to the ajax to process it.

I am sure this has been solved before as I've seen it on websites. Is there a simple way to do this, such as a jquery plugin or another javascript API?

Or would I have to write the form in the div by hand, overlay it with z-index in css and hide it. And then when it is called have the form appear?

What's the easiest way to solve this? Thanks a lot

  • javascript
  • jquery
Share Improve this question asked Jul 30, 2010 at 13:22 Reily BourneReily Bourne 5,33710 gold badges33 silver badges44 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 3

It sounds like you're looking for a modal popup that fetches the form from the server through an HTTP request.

There are a lot of examples online. Check out jQuery ThickBox: http://jquery./demo/thickbox/

Even better, here is a page with over 30 examples to choose from: http://www.dottony./30-useful-ajax-lightbox-and-modal-dialog-solutions/

You can take a look at the FancyBox plugin (originally meant for displaying pictures, but can be used for forms as well).
See this link: http://fancybox/blog, in the middle of the page look for "5. Display login form" example.

Try any of the excellent jQuery "lightbox" type plugins which allow for Ajax content.

Just search "jquery lightbox."

You can write some CSS to show your form on the top with absolute positioning. something like:

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

and then use following markup:

<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>

I agree with the other guys: you want something like [thick|light|color|fancy|...]-box. So, to mention my favorite solution: http://nyromodal.nyrodev./#demos

Good thing is, that you can make it behave like an iframe and simply pass the url to the form you want to show ..

本文标签： javascriptMake a forminadiv appear on top of contentStack Overflow

版权声明：本文标题：javascript - Make a form-in-a-div appear on top of content - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744046862a2581684.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。