Zamknij Bootstrap Modal Na formularzu Wyślij

Question

Mam Mod Bootstrap, który zawiera formularz. Modal zawiera również przycisk Prześlij i anuluj. Teraz jak na moje wymagania, na przycisk Prześlij kliknięciem modalne, Formularz jest złożenie Pomyślnie ale modalna jest coraz closed..Here nie jest mój 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> 

Jak zrobić ..Please mi pomóc .. Dzięki ..

Answer 1

Używaj Kod

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

Answer 2

dać id na przycisk submit

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

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

także zapomniał zamknąć ostatnią div.

</div> 

Mam nadzieję, że to pomoże.

Answer 3

Dodaj ten sam atrybut, jak masz na przycisk Zamknij:

data-dismiss="modal" 

np

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

Można również użyć jQuery, jeśli chcesz:

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

    // submission stuff 

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

Answer 4

Można użyć jednej z tych dwóch opcji:

1) Dodawanie danych-odwołać do składania przycisk IE

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

2) Zrób to w JS jak

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

Answer 5

robię ten kod to działa dobrze, ale raz przycisk przesyłania formularza model nie otwarte ponownie powiedzieć e.preventdefault modelu nie jest funkcją ..

skorzystać z poniższego kodu na dowolny wydarzenie, które ogień na Złożenie

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

można uczynić ten kod bardziej krótki ..

jeśli jakikolwiek organ znalazł rozwiązanie dla e.preventdefault, poinformuj nas o tym:

Answer 6

Nie dodawano ani data-dismiss="modal", ani używania $("#modal").modal("hide") w javascript. Pewnie zamknęli modal, ale prośba ajaxowa również nie została wysłana.

Zamiast tego, renderowałem fragmenty zawierające modały ponownie po pomyślnym wykonaniu ajax (używam ruby ​​na szynach). Musiałem również usunąć klasę "modal-open" ze znacznika body. To w zasadzie resetuje modały. Myślę, że coś podobnego, z wywołania zwrotnego po pomyślnej prośby ajax, aby usunąć i dodać z powrotem modały powinny działać również w innym frameworku.

Answer 7

jeśli twój modal ma przycisk anulowania (w przeciwnym razie utwórz ukryty przycisk zamykania). Możesz symulować zdarzenie kliknięcia na tym przycisku, aby formularz został zamknięty. wW komponentu dodać ViewChild

export class HelloComponent implements OnInit { 

@ViewChild('fileInput') fileInput:ElementRef; 

w ścisłej przycisk dodać #fileInput

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

Gdy chcesz zamknąć modal programowo wywołać zdarzenie kliknij na przycisk Zamknij

this.fileInput.nativeElement.click(); 

Answer 8

Wymienione odpowiedzi nie będą działać, jeśli wyniki przedkładanie formularza AJAX wpływa na kod HTML spoza zakresu modalnego, zanim modal się zakończy. W moim przypadku wynik był wyszarzony (zanikanie) ekranu, na którym mogłem zobaczyć aktualizację strony, ale nie mogłem wchodzić w interakcje z żadnym z elementów strony.

Moje rozwiązanie:

$(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; 
}); 

Uwaga: Moja forma była modalne wewnątrz div, który został już świadczonych za pośrednictwem AJAX, a tym samym potrzebę zakotwiczenia słuchacz wydarzenie dokumentować.

Answer 9

Spróbuj kod

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

Answer 10

Używam szyn i Ajax zbyt i miałem ten sam problem. po prostu uruchom ten kod

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

który pracował dla mnie, ale staram się to naprawić bez użycia jQuery.