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
Share Improve this question asked Jul 30, 2010 at 13:22 Reily BourneReily Bourne 5,33710 gold badges33 silver badges44 bronze badges5 Answers
Reset to default 3It 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 ..