Всплывающая форма при нажатии кнопки

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


jquery popup
person yogsma    schedule 15.10.2010    source источник

Ответы (6)


arrow_upward
5
arrow_downward

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

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. Если вам нужна дополнительная помощь по отправке формы, просто сообщите нам более подробную информацию ...

person Lorenzo    schedule 15.10.2010
comment
Это мой код для jquery: $ (document) .ready (function () {$ ('# divdeps'). Dialog ({autoOpen: false, show: 'slide', resizeable: true, position: 'center', modal :истинный});}); ...это не работает. - person yogsma; 16.10.2010
comment
@yogsma: пожалуйста, прочтите мою правку в конце моего ответа. Также, пожалуйста, обратите внимание, что в вашем коде есть орфографическая ошибка: resizeable должно быть resizable. Надеюсь, поможет! - person Lorenzo; 16.10.2010
comment
@yogsma: Вот рабочий образец, точно такой же, как в ответе, который демонстрирует, что он работает. Если он не работает, возможно, что-то еще ломается в вашем коде. Пожалуйста, опубликуйте больше своего кода для получения дополнительной помощи. http://jsbin.com/ugetu3 - person Lorenzo; 16.10.2010

arrow_upward
1
arrow_downward

Как сгенерировать простое всплывающее окно с помощью jQuery

person Alex    schedule 15.10.2010

arrow_upward
1
arrow_downward

Найдите диалоговое окно 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
                           }
                       });
person tpow    schedule 15.10.2010
comment
Этот код будет работать только один раз. Если вы закроете диалоговое окно, вы больше никогда не сможете его открыть ...;) посмотрите http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ - person Lorenzo; 15.10.2010

arrow_upward
1
arrow_downward

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

<!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>
person David    schedule 30.09.2016

arrow_upward
0
arrow_downward

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

person casablanca    schedule 15.10.2010

arrow_upward
-1
arrow_downward

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

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

person Salik    schedule 25.08.2013