Is there a way to create a form in pop-up window on click of a button using jquery? Form will have few input fields and 'Save' & 'Cancel' buttons. So on clicking 'Save', the information in form will be saved in database and will be back to original screen. I would like to have a fade-in pop up window.
Asked
Active
Viewed 9.9k times
6 Answers
5
Use this code
HTML
<div id="divdeps" style="display:none" title=""></div>
Jquery on DOM ready
$("#divdeps").dialog({
autoOpen: false,
show: 'slide',
resizable: false,
position: 'center',
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
This code will initialize a Dialog and put it in state ready to be open and successively closed. If you want to open the dialog when the page loads then add this line of code just after the code you've already added in document ready:
$("#divdeps").dialog('open');
If instead you want to open the Dialog following a click event add the same code on the click event of the element that should fire the opening.
Add your form inside the myDialog DIV. If you need more help regarding the form submission just give us more details...
Lorenzo
- 29,081
- 49
- 125
- 222
-
This is my code for jquery : $(document).ready(function(){$('#divdeps').dialog({autoOpen:false,show:'slide',resizeable:true,position:'center',modal:true});}); ...it is not working. – yogsma Oct 15 '10 at 20:01
-
@yogsma: please have a look to my edit at the end of my answer. Also, please there's a misspelling in your code `resizeable` should be `resizable`. Hope it helps! – Lorenzo Oct 15 '10 at 20:17
-
@yogsma: Here is a working sample exactly as in the answer that demonstrates that works. If it's not working maybe something else is breaking in your code. Please post more of your code for more help. `http://jsbin.com/ugetu3` – Lorenzo Oct 15 '10 at 21:38
1
Find JQuery UI dialog.
Create a div with your form in it:
<div id=form>
your form here
</div>
Then call a dialog instance (probaby link this is some sort of click handler to trigger form)
$('#form').dialog({
modal: true,
buttons:
{ "Cancel": function() {
$(this).dialog("close")
},
"Submit": function() {
//put code here for form submission
}
});
tpow
- 7,600
- 11
- 59
- 84
-
This code would work only once. If you close the dialog you'll never be able to reopen it... ;) please look at `http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/` – Lorenzo Oct 15 '10 at 19:07
1
Here is an example using JQuery. You can check other types of popup Dialog in details.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
David
- 1,646
- 17
- 22
0
Have a look at the the jQuery UI Dialog. It does exactly what you want, and can be configured to add animations such as fade-in.
casablanca
- 69,683
- 7
- 133
- 150
