如何使用js確認的選項製作模式窗口？

Question

如何使用js確認的選項製作模式窗口？

例如，我有這樣的：<a href="/calc-delete.php?" onclick="return confirm('Do you want to remove?')">Delete</a>

如何做這樣的事情了我的例子，但與模態窗口？這將是冷靜，如果這將是一個引導模式窗口和答案將顯示在同一個模態窗口

Answer 1

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

「觸發」部分：

要觸發模式窗口，你需要使用按鈕或鏈接。

然後包括兩個數據 - *屬性：

data-toggle="modal"打開模態窗口
data-target="#myModal"指向模式

的 「莫代爾」 部分的ID：

父模態的<div>必須具有與用於觸發模式（「myModal」）的data-target屬性的值相同的ID。

.modal類將<div>的內容標識爲模態，並將注意力集中到它上面。

.fade類增加了淡入模式的過渡效果。如果你不想要這個效果，請刪除這個類。

屬性role="dialog"改善了使用屏幕閱讀器的人們的可訪問性。

.modal-dialog類設置模態的適當寬度和邊距。

的 「莫代爾內容」 部分：

的<div>與class="modal-content"風格模式（邊框，背景顏色等）。在<div>的內部，添加模式的標題，正文和頁腳。

.modal頭類用於定義模態頭的樣式。標題內的<button>具有data-dismiss="modal"屬性，如果您單擊該屬性，則會關閉該模式。 .close類設置關閉按鈕的樣式，.modal-title類使用適當的行高來設置標題的樣式。

.modal-body類用於定義模態體的樣式。在這裏添加任何HTML標記;段落，圖像，視頻等

.modal-footer類用於定義模式的頁腳樣式。請注意，此區域默認情況下是右對齊的。

Answer 2

W3C學校對如何創建模式

http://www.w3schools.com/howto/howto_css_modals.asp

所有你需要做一個非常好的文章，是開放與onclick=return openModal()的模式，並從OK按鈕處理PHP通話在你的模態。

Answer 3

試試這個，

HTML

<form action ="#" method="POST"> 
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button> 
</form> 

<div id="confirm" class="modal hide fade"> 
    <div class="modal-body"> 
    Are you sure? 
    </div> 
    <div class="modal-footer"> 
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button> 
    <button type="button" data-dismiss="modal" class="btn">Cancel</button> 
    </div> 
</div> 

JAVASCRIPT

$('button[name="remove_levels"]').on('click', function(e){ 
     var $form=$(this).closest('form'); 
     e.preventDefault(); 
     $('#confirm').modal({ backdrop: 'static', keyboard: false }) 
      .one('click', '#delete', function (e) { 
       $form.trigger('submit'); 
      }); 
    }); 

DEMO

對於多個按鈕（上同一模型中的多個鏈路）

DEMO