Закрыть Bootstrap Modal On form Отправить

Ответ 1

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

 $('#button').submit(function(e) {
    e.preventDefault();
    // Coding
    $('#IDModal').modal('toggle'); //or  $('#IDModal').modal('hide');
    return false;
});

Ответ 2

Добавьте тот же атрибут, что и у кнопки "Закрыть":

data-dismiss="modal"

например.

<button type="submit" class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> Save</button>

Вы также можете использовать jQuery, если хотите:

$('#frmStudent').submit(function() {

    // submission stuff

    $('#StudentModal').modal('hide');
    return false;
});

Ответ 3

дать идентификатор, чтобы отправить кнопку

<button id="btnSave" type="submit" class="btn btn-success"><i class="glyphicon glyphicon-trash"></i> Save</button>

$('#btnSave').click(function() {
   $('#StudentModal').modal('hide');
});

Также вы забыли закрыть последний div.

</div>

Надеюсь это поможет.

Ответ 4

Я заставляю этот код работать нормально, но как только кнопка отправки формы модели не открывается, снова скажите, что e.preventdefault не является функцией.

Используйте код ниже в любом событии, которое запускается при отправке формы

                $('.modal').removeClass('in');
                $('.modal').attr("aria-hidden","true");
                $('.modal').css("display", "none");
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');

вы можете сделать этот код более коротким.

если какое-либо тело найдено решение для e.preventdefault, сообщите нам

Ответ 5

Вы можете использовать один из этих двух вариантов:

1) Добавить данные - отпустите кнопку отправки i.e.

<button type="submit" class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> Save</button>

2) Сделайте это в JS, например

$('#frmStudent').submit(function() {
    $('#StudentModal').modal('hide');
});

Ответ 6

Ни одно добавление data-dismiss="modal", а использование $("#modal").modal("hide") в javascript не работало для меня. Конечно, они закрыли модальный, но запрос ajax также не отправлен.

Вместо того, чтобы ajax был успешным (я использую ruby ​​on rails), я снова добавил частицу, содержащую модалы. Мне также пришлось удалить класс "modal-open" из тега body. Это в основном сбрасывает модальности. Я думаю, что что-то подобное, с обратным вызовом при успешном запросе ajax для удаления и добавления назад, модальные файлы должны работать и в других рамках.

Ответ 7

Я использую рельсы и ajax, и у меня была такая же проблема. просто запустите этот код

 $('#modalName').modal('hide');

который работал у меня, но я также пытаюсь исправить его, не используя jQuery.

Ответ 8

если ваш модальный имеет кнопку отмены (иначе создайте скрытую кнопку закрытия). Вы можете имитировать событие клика на этой кнопке, чтобы ваша форма была закрыта. В вашем компоненте добавьте ViewChild

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

в вашей кнопке закрытия добавьте #fileInput

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button>

Если вы хотите закрыть модальный программный запуск события клика на кнопке закрытия

this.fileInput.nativeElement.click();

Ответ 9

Перечисленные ответы не будут работать, если результаты формы формы AJAX будут влиять на HTML вне области модальности до того, как модальное завершение будет закрыто. В моем случае результатом стал экран с серым цветом (выцветание), где я мог видеть обновление страницы, но не мог взаимодействовать с каким-либо элементом страницы.

Мое решение:

$(document).on("click", "#send-email-submit-button", function(e){
    $('#send-new-email-modal').modal('hide')
});

 $(document).on("submit", "#send-email-form", function(e){
    e.preventDefault();
    var querystring = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "sendEmailMessage",
        data : querystring,
        success : function(response) {
            $('#send-new-email-modal').on('hidden.bs.modal', function () {
                $('#contacts-render-target').html(response);
            }
    });
    return false;
});

Примечание. Моя модальная форма находилась внутри родительского div, который уже был обработан с помощью AJAX, поэтому необходимо привязать прослушиватель событий к документу.

Ответ 10

Попробуйте этот код

$('#frmStudent').on('submit', function() {
  $(#StudentModal).on('hide.bs.modal', function (e) {
    e.preventDefault();
  })
});

Ответ 11

У меня была такая же проблема и, наконец, она работала с этим кодом:

<%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%>

                      # form fields entered here

<div class="actions">
    <%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form();", "data-dismiss":"modal"%>
</div>

 <script>
    function submit_form() {
      document.getElementById('friend_email_form').submit();
    }
</script>

Выбранный ответ мне не помог.