引导程序3:删除确认对话框无效

Bootstrap 3: delete confirm dialog box not work

本文关键字：对话框 无效 确认 删除 引导程序      更新时间：2023-09-26

我找到了删除确认对话框的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中显示对话框。我该怎么解决这个问题？

演示

模式模板在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/.

相关文章：