Bootstrap 3：删除确认对话框不起作用

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

顺便说一句，有severals非常酷的JavaScript /自举插件做你想要做的像什么http://bootboxjs.com/ ， http://nakupanda.github.io/bootstrap3-dialog/ 。