Bootstrap 引导确认对话框

gudnpqoy 于 2023-01-28 发布在 Bootstrap

关注(0)|答案(3)|浏览(287)

我现在有一个页面，询问用户是否想做某件事。目前，它的工作原理是这样的：

<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模态窗口，因为我在代码中的其他地方有它。我添加了以下内容：

<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中的url。我该如何设置呢？
谢谢

twitter-bootstrap

来源：https://stackoverflow.com/questions/30666485/bootstrap-confirmation-dialog

3条答案

按热度按时间

n53p2ov01#

超文本标记语言

<!-- 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>

苏丹

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

赞(0）回复(0）举报 2023-01-28

qmelpv7a2#

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

它将停留在“否”，因为它是默认行为或引导模式，我们已经在上面提到的“是”按钮上附加了事件。

赞(0）回复(0）举报 2023-01-28

j1dl9f463#

虽然姗姗来迟，但在过去几年中事情已经有所进展。作为参考，如果其他人需要问同样的问题，将模态封装在表单中并使用输入来响应可能更容易：

<!-- Modal -->
    <form action="letsdothisthing.php method="post">
<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>
                    <input type="submit" class="btn btn-primary value="YES" ></input>
                </div>
            </div>
        </div>
    </div>
</form>

赞(0）回复(0）举报 2023-01-28

我来回答

Bootstrap 引导确认对话框

3条答案

相关问题

热门标签

最新问答