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>

但是，我不确定如何连接与链接的交互。如果用户说'＃34;否＆＃34;，我想留在页面上。如果用户说＆＃34;是＆＃34;，我想将用户重定向到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 "
});

它将保持为no，因为它的默认行为或bootstrap模式，我们在上面提到的yes按钮上附加了事件。

Bootstrap确认对话框

2 个答案: