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.

回答1:

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

回答2:

How to generate a simple popup using jQuery

回答3:

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
                           }
                       });

回答4:

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>

回答5:

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.

回答6:

I am using following popup box which looks more appealing.

http://gristmill.github.io/jquery-popbox/

来源：https://stackoverflow.com/questions/3945216/pop-up-form-on-button-click

标签

jquery

popup