Question

我正在使用bootstrap并希望使用带有按钮的模态启动来确认用户删除操作。但是来自bootstrap的示例代码似乎不适用于我。所以我在论坛上寻找一些例子，但仍然无效。我试过的一个例子来自here。已经过了2个小时，我仍然不知道我的代码有什么问题。确认按钮不起作用，所以每当我点击确认按钮时，它什么都不做。当我将鼠标光标移到btn-ok上时，我没有在浏览器中看到链接概述。

这是我的代码：

<button class="btn btn-default" data-href="delete.php?id=54" data-toggle="modal" data-target="#confirm">Delete</button>

<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            ...
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <a class="btn btn-danger btn-ok">Delete</a>
        </div>
    </div>
</div>

Answer 1

试试这个小提琴

https://jsfiddle.net/gildonei/pho9zp2f/9/

Html代码

<a class="btn btn-default btn-delete" href="delete.php?id=54">Delete</a>
<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">...</div>
            <div class="modal-body">...</div>
            <div class="modal-footer">
                <a id="bt-modal-cancel" href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> 
                <a id="bt-modal-confirm" class="btn btn-danger btn-ok">Delete</a>

            </div>
        </div>
    </div>
</div>

Javascript代码

$(function(){
    var $myModal = jQuery('#my-modal');

    // Modal to delete record
    var $btDelete = jQuery('.btn-delete');
    if ($btDelete.length) {
        $btDelete.click(function(e){
            e.preventDefault();

            var url = jQuery(this).attr('href');
            var id = url.replace(/[^0-9]/g, '');

            // Objects from alert modal
            var $dsBody = $myModal.find('div.modal-body');
            var $dsTitle = $myModal.find('div.modal-header h3');
            var $btConfirm = jQuery('#bt-modal-confirm');
            var $btCancel = jQuery('#bt-modal-cancel');

            $dsBody.html('<p>Are you sure you want to delete the record #' + id + '?</p>');
            $dsTitle.html('Delete Record');

            $myModal.modal({
                show: true
            });


            $btConfirm.attr('href', url).removeAttr('data-dismiss');
            $btCancel.click(function(){
                $dsTitle.html('Warning');
                $dsBody.html('<p>Notice</p>');
                $btConfirm.attr('href', '#').attr('data-dismiss', 'modal');
            });
        });
    }

});

Answer 2

你看起来有点不清楚。如果您尝试隐藏模态并在用户单击删除时执行删除，则应尝试绑定到删除按钮的单击事件：

$('.btn-ok').click(function() {
   /* Add any code here to delete the user */
   $('.modal').modal('hide');
});

Here is a another fiddle（复制自@ isherwood的编辑评论）

使用模态引导程序确认将无法正常工作

2 个答案: