it-swarm.com.ru

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

У меня есть Bootstrap Modal, который содержит форму. Модал также содержит кнопки «Отправить» и «Отмена». Теперь, в соответствии с моим требованием, при нажатии кнопки «Отправить» модального окна форма успешно отправляется, но модальное окно не закрывается. Вот мой 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>

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

24
Lara

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

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

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

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

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

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

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

5
Kandarp

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

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

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

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

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

3
Abhi

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

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');
});
2
Mō Iđɍɨɇƶ

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

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

1
EJ2015

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

0
Devon Luongo

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

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

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

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

0
Hindreen

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

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

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

<%=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>

Выбранный ответ не работает для меня.

0
tomb