模態關閉警告關閉

Question

在頁面上，我將使用一種不需要全部填充的表單的引導模式。

有沒有一種方式，當用戶點擊模式上的關閉按鈕，有一個警告彈出確認關閉和取消關閉？

Answer 1

假設你有2個情態動詞

1. 一個表單（第一模式）和第2的警告，關閉模式（包括模態）的

2. ，並使用引導默認的模態行爲data-toggle和data-target調用第一模態（用形式）

重要：

1. 確保在表模態觸發按鈕添加data-backdrop="static"和data-keyboard="false"所以當點擊模式之外否則整個解決方案是沒用它不會被關閉。

2. 請確保您在Warning Modal中添加了data-backdrop="false"，以便第一個模態只有一個後備降落。

變化：

1. 從兩個頭刪除data-dismiss="modal" /頁腳Close Button表模態的

2. 添加data-dismiss="modal"來警告莫代爾Cancel Close button僅僅只辭退警告模式

3. 廣告d類closefirstmodal表格莫代爾頁眉/頁腳Close button與jQuery click function和bootstrap modal event listener

4. 添加類confirmclosed調用報警模式的警告莫代爾Confirm close Button將使用通過jQuery $('#Modalselector').modal('hide')與jQuery click function關閉兩個表格/警告情態動詞和隱藏兩種模態

模態的HTML

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#Form" data-backdrop="static" data-keyboard="false">Open Modal</button> 
<!-- Modal With Form --> 
<div id="Form" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close closefirstmodal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 

      </div> 
      <div class="modal-body"> 
       <p>Some Form Elements Here</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default closefirstmodal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- Modal With Warning --> 
<div id="Warning" class="modal fade" role="dialog" data-backdrop="false"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <p>This Is A Warning Message</p> 
       <button type="button" class="btn btn-danger confirmclosed">Confirm Close</button> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

個JS與B.S模態事件監聽器（可以跳過事件偵聽器，但我更喜歡這種方式）

//jQuery and Bootstrap Lib's always comes first 
$(document).ready(function() { //Dom Ready 
    $('.closefirstmodal').click(function() { //Close Button on Form Modal to trigger Warning Modal 
     $('#Warning').modal('show').on('show.bs.modal', function() { //Show Warning Modal and use `show` event listener 
      $('.confirmclosed').click(function() { //Waring Modal Confirm Close Button 
       $('#Warning').modal('hide'); //Hide Warning Modal 
       $('#Form').modal('hide'); //Hide Form Modal 
      }); 
     }); 
    }); 
}); 

Fiddle example-1

JS不B.S模態事件監聽器

$(document).ready(function() { 
    $('.closefirstmodal').click(function() { 
     $('#Warning').modal('show'); 
    }); 

    $('.confirmclosed').click(function() { 
     $('#Warning').modal('hide'); 
     $('#Form').modal('hide'); 
    }); 
}); 

Fiddle Example-2