ansaurus

Question

Make a form-in-a-div appear on top of content

Answer 1

+1 A:

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.net/blog, in the middle of the page look for "5. Display login form" example.

naivists 2010-07-30 13:25:14

Answer 2

+1 A:

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

Just search "jquery lightbox."

Squirkle 2010-07-30 13:25:22

Answer 3

+3 A:

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.com/demo/thickbox/

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

Alison 2010-07-30 13:27:45

Answer 4

+1 A:

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>

Pavel Morshenyuk 2010-07-30 13:38:46

Of course, if you don't want use mega/awesome/best-box plug-in ^^

Pavel Morshenyuk 2010-07-30 13:43:25

Answer 5

+1 A:

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

harpax 2010-07-30 13:39:22

ansaurus

tags:

views:

answers:

Make a form-in-a-div appear on top of content

related questions