[英]OK and Cancel in a bootstrap modal
我想在引導模式中實現經典的 OK 和 Cancel 概念。
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
user can select an option here from a list
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
在模型內容中,有一個,用戶可以選擇其中一個選項。 如果單擊確定,我想處理新選項。 如果不是,則不需要任何操作。 為此,我掛上了 hide.bs.modal 事件,但在單擊 Cancel 時會調用該事件。
如何區分“取消”和“確定”按鈕?
好吧,Bootstrap 不支持模態操作按鈕的特定模態事件。 所以,我相信你必須像這樣自己處理這些事件。
$("#myModal").on("click",".btn-default", function(){
// code
});
$("#myModal").on("click",".btn-primary", function(){
// code
});
您可以簡單地向“確定”按鈕添加單擊事件? 如果您不將e.preventDefault()
添加到您的事件中,您可以正常處理。
首先為你的 OK 按鈕添加一個明確的 ID 或類名:
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
user can select an option here from a list
<select name="select" id="select1">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="btn_ok_1" class="btn btn-primary">OK</button>
</div>
</div>
</div>
然后向該按鈕添加一個點擊事件:
$("#btn_ok_1").click(function (e) {
var selectedOption = $('select#select1 option:selected').val;
// Do some work with selected item.
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.