關閉Bootstrap模態在表單提交

我有一個包含窗體的Bootstrap模態。模態還包含提交和取消按鈕。現在按照我的要求，對提交按鈕點擊模態的，形式是成功提交，但語氣沒有得到closed..Here是我的HTML ..關閉Bootstrap模態在表單提交

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

怎麼辦呢..Please幫助我..謝謝..

來源

2015-11-02 Lara

使用該代碼

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

來源

2016-05-16 10:37:22

這幾乎是正確的，但不**從事件處理函數返回false，因爲這與調用相同事件對象上的preventDefault（）和stopPropagation（）。調用preventDefault（）可以阻止發生的提交，這不是所期望的結果。這也是爲什麼data-dismiss attrib不起作用 - 引導模式js添加的事件也會在事件上調用preventDefault（）。 – othp

＃按鈕應該是表單的ID，而不是按鈕（請參閱[鏈接]（https://developer.mozilla.org/en-US/docs/Web/Events/submit）頂部的註釋）如果在按鈕上使用事件，請使用click事件。 – othp

也考慮調用'.modal（'hide'）;'而不是'切換'，否則如果您的表單也可以在沒有可見模式的情況下提交，那麼當提交事件被觸發時將顯示模式。 – othp

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

希望這會有所幫助。

來源

2015-11-02 12:54:24 Kandarp

這不適用於我的情況 – Lara

@Lara是否會進入點擊事件？ – Kandarp

不，甚至沒有得到點擊事件也 – Lara

添加相同的屬性，你必須關閉按鈕：

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

來源

2015-11-02 12:55:46 martincarlin87

它不在我的情況下工作 – Lara

哪一個？ css選擇器是否正確？答案中的任何一個建議都應該可以工作。 – martincarlin87

這確實關閉了模態對話框，但在我的情況下，不會觸發模態中的內部窗體提交。 –

您可以使用此兩個選項之一：

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

來源

2015-11-02 12:57:07

它不工作在mycase – Lara

「在JS中做這樣的事情」......更好地說「在JQuery」 –

我有這樣的代碼，它的工作很好，但一旦形成提交模式按鈕沒有打開模型再說e.preventdefault不是一個函數..

使用下面的代碼在任何事件觸發上提交表單

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

可以讓這個代碼更短..

如果e.preventdefault任何機構找到解決方案讓我們知道

來源

2016-05-19 17:57:36 Abhi

既不增加也不data-dismiss="modal" javascript中爲我工作使用$("#modal").modal("hide")。確定他們關閉了模式，但是ajax請求也沒有發送。

取而代之，我在ajax成功後（我在rails上使用ruby）再次渲染了包含模塊的部分。我也必須從body標籤中刪除"modal-open"類。這基本上重置模態。我認爲類似的東西，回調成功的ajax請求刪除和添加模式也應該在其他框架中工作。

來源

2016-08-05 00:05:17 EJ2015

如果你的模態有一個取消按鈕（否則創建一個隱藏的關閉按鈕）。您可以模擬此按鈕上的點擊事件，以便關閉窗體。 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>

當你想關閉模式編程上的關閉按鈕觸發點擊事件

this.fileInput.nativeElement.click();

來源

2017-04-26 17:44:17

請不要發表[重複的答案]（http://stackoverflow.com/a/43641199/6083675）。如果問題重複，則將其標記爲重複項。 – Laurel

列出的答案將無法正常工作，如果結果在模式完成關閉之前，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; 
});

注：我的模式窗體的是，已經通過AJAX呈現，因此需要錨定事件監聽器來記錄父DIV中。

來源

2017-05-07 12:14:41

試試這個代碼

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

來源

2017-06-29 04:47:56 nnattawat

我使用的鐵軌和阿賈克斯也和我有同樣的問題。只是運行這段代碼

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

，對我的工作，但我想也解決它，而無需使用jQuery的。

來源

2017-07-12 07:06:45 Hindreen

關閉Bootstrap模態在表單提交

回答

相關問題