Всплывающая форма при нажатии кнопки - PullRequest
4 голосов
/ 15 октября 2010

Есть ли способ создать форму во всплывающем окне при нажатии кнопки с помощью jquery?Форма будет иметь несколько полей ввода и кнопки «Сохранить» и «Отмена».Поэтому, нажав «Сохранить», информация в форме будет сохранена в базе данных и вернется на исходный экранЯ хотел бы иметь всплывающее окно.

Ответы [ 6 ]

5 голосов
/ 15 октября 2010

Используйте этот код

HTML

<div id="divdeps" style="display:none" title=""></div>

JQuery на DOM готов

$("#divdeps").dialog({
    autoOpen: false,
    show: 'slide',
    resizable: false,
    position: 'center',
    stack: true,
    height: 'auto',
    width: 'auto',
    modal: true
});

Этот код инициализирует диалог и переводит его в состояние готовности к открытию и последующему закрытию. Если вы хотите открыть диалоговое окно при загрузке страницы, добавьте эту строку кода сразу после того, как код, который вы уже добавили в документ, готов:

$("#divdeps").dialog('open');

Если вместо этого вы хотите открыть диалоговое окно после события щелчка, добавьте тот же код в событие щелчка элемента, который должен открывать открытие.

Добавьте вашу форму в myDialog DIV. Если вам нужна дополнительная помощь относительно отправки формы, просто сообщите нам более подробную информацию ...

1 голос
/ 30 сентября 2016

Вот пример использования JQuery.Вы можете проверить другие типы всплывающих окон Диалог подробно.

<!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>
1 голос
/ 15 октября 2010

Диалоговое окно Find JQuery UI.

Создайте div с вашей формой в нем:

<div id=form>
 your form here
</div>

Затем вызовите экземпляр диалогового окна (вероятная ссылка, это своего рода обработчик щелчков для запуска формы)

                       $('#form').dialog({
                            modal: true,
                            buttons:
                          { "Cancel": function() {
                              $(this).dialog("close")
                          },
                              "Submit": function() {
                               //put code here for form submission
                           }
                       });
1 голос
/ 15 октября 2010
0 голосов
/ 25 августа 2013

Я использую следующее всплывающее окно, которое выглядит более привлекательным.

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

0 голосов
/ 15 октября 2010

Взгляните на jQuery UI Dialog . Он делает именно то, что вам нужно, и может быть настроен на добавление анимации, такой как постепенное появление.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...