Bootstrap確認對話框

Question

我目前有一個頁面詢問用戶他們是否想要實際執行某些操作。目前，它的工作原理是這樣的：

<a href="/do/this/thing/1234" onclick="return promptUser();">Do This Thing</a> 
<script type="text/javascript"> 
    function promptUser() { 
    return confirm("Are you sure you want to do this thing?"); 
    } 
</script> 

現在，用戶想要添加一些圖形等對話框。出於這個原因，我想使用Bootstrap Modal窗口，就像我在代碼中的其他地方一樣。我添加了以下內容：

<div id="confirmDialog" class="modal hide fade"> 
    <div class="modal-body"> 
     Are you sure you want to do this thing? 
    </div> 
    <div class="modal-footer"> 
     <button type="button" data-dismiss="modal" class="btn btn-primary" id="confirmed">Yes</button> 
     <button type="button" data-dismiss="modal" class="btn">No</button> 
    </div> 
</div> 

但是，我不確定如何連接與鏈接的交互。如果用戶說「不」，我想留在頁面上。如果用戶說「是」，我想將用戶重定向到href中的網址。我如何設置？

感謝

Answer 1

HTML

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    click me 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       ... 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" id="confirm">confirm</button> 
      </div> 
     </div> 
    </div> 
</div> 

JS

$('#confirm').on('click', funciton(){ 
    window.location.href = "http://stackoverflow.com"; 
}); 

Answer 2

$('#confirmed').click(function(){ 
location.href = "some URL " 
}); 

它將停留在沒有它的默認行爲，或引導模式上面我們已經提到上附着的是按鈕事件。