Закрыть Bootstrap Modal в форме отправки

У меня есть модальный Bootstrap, который содержит форму . Модальный также содержит, Submit и кнопку отмены. Теперь, согласно моему требованию, при нажатии кнопки отправки модальной формы Форма успешно отправляется, но модальная не закрывается..Вот мой HTML..

<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-labelledby="StudentModalLabel" aria-hidden="true" data-backdrop="static">
   <div class="modal-dialog">
      <div class="modal-content">
         <form action="~/GetStudent" class="form-horizontal" role="form" method="post" id="frmStudent">
            <div class="modal-footer">
               <div class="pull-right">
                  <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
               </div>
            </div>
         </form>
      </div>
   </div>

Как это сделать ..Пожалуйста, помогите мне ..Спасибо..

21
forms html javascript jquery twitter-bootstrap

10 ответов

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

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

добавьте тот же атрибут, что и на кнопке закрытия:

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

дайте id для отправки кнопки

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

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

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

</div>

надеюсь, что это помогает.

3

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

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

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

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

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

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

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

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

2

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

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

1

Если ваш модальный имеет кнопку отмены (в противном случае создайте скрытую кнопку закрытия). Вы можете имитировать событие click на этой кнопке, чтобы ваша форма была закрыта. Iin ваш компонент добавить 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>

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

this.fileInput.nativeElement.click();
0

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

мое решение:

$(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, таким образом, необходимость привязать прослушиватель событий к документ.

0

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

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

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

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

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

0