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

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

1 个答案: