javascript - Bootstrap 3 : delete confirm dialog box not work

Question

我找到了这个用于删除确认对话框的 bootstrap 函数:

JS:

$(document).ready(function() {
    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');
        if (!$('#dataConfirmModal').length) {
            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});

HTML:

<a href="delete.cfm" data-confirm="Are you sure you want to delete?">Delete</a>

这有效，但 css/JS 样式在 bootstrap +3 中不显示对话框。我该如何解决这个问题？

DEMO

Answer 1

模态模板在 bootstrap +3 中已更改，您需要更改打开模态时附加到正文中的 HTML 代码。参见 http://getbootstrap.com/javascript/#modals ，新模板是:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

顺便说一句，有几个非常酷的 javascript/boostrap 插件可以做你想做的事，比如 http://bootboxjs.com/ , http://nakupanda.github.io/bootstrap3-dialog/ .