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

它将停留在没有它的默认行为，或引导模式上面我们已经提到上附着的是按钮事件。