用于删除某些内容的Bootstrap确认对话框

时间:2014-09-08 19:58:01

标签: javascript twitter-bootstrap

我在这里遇到了一些问题,我无法在任何地方找到解决方案......我已经在这里看了好几个小时而没有。

好的,所以,基本上我想要做的是显示一个包含新闻列表的表格(对于我正在处理的网站)。此表中的每条新闻都有一个唯一的ID和一个要排除的选项。我想创建一个确认对话框,以排除用户选择删除的新闻。但我无法从表中获取ID,只能获得对话框。

我使用bootstrap模式进行操作。 这是我到目前为止的代码:

表格内的按钮(使用默认ID删除):

<a class="btn btn-danger confirm-delete"  data-toggle="modal" data-target="#myModal" data-href="delete.php?id=23" ><i class="fa fa-ban"></i> Delete</a>

或者

<a class="btn btn-danger confirm-delete"  data-toggle="modal" data-target="#myModal" data-id="23" ><i class="fa fa-ban"></i> Excluir</a>

模式中的按钮:

<div class="modal-footer">
    <a class="btn btn-success pointer" data-dismiss="modal" aria-hidden="true"><i class="fa fa-check-square-o"></i> Cancel</a>
    <a class="btn btn-danger danger pointer" href="delete.php?ref=" ><i class="fa fa-ban"></i> CONFIRM</a>
</div>

的JavaScript

$('#myModal').on('show', function() {
    var id = $(this).data('id'),
    removeBtn = $(this).find('.danger');

    removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)ref=\d*/, '$1ref=' + id));

    $('#debug-url').html('Delete URL: <strong>' + removeBtn.attr('href') + '</strong>');
});

$('.confirm-delete').on('click', function(e) {
    e.preventDefault();

    var id = $(this).data('id');
    $('#myModal').data('id', id).modal('show');
});

1 个答案:

答案 0 :(得分:0)

您正在使用错误的事件进行引导。 http://getbootstrap.com/javascript/#modals-usage并参加活动(只需向下滚动一下)

show.bs.modal - 调用show实例方法时会立即触发此事件。如果由单击引起,则单击的元素可用作事件的relatedTarget属性。