Pop up form on button click
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.
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...
How to generate a simple popup using jQuery
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
}
});
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>
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.
I am using following popup box which looks more appealing.
http://gristmill.github.io/jquery-popbox/
加载中,请稍侯......
精彩评论