Question

嘿，我是Bootstrap的新手。我想用Modals构建一个安全的删除按钮。当你点击时你会被问到：真的要删除吗？然后你可以选择是或否。该领域中有多个元素。在第一个它工作正常。在第二个元素处，相同的数据显示在第一个元素中。如果您重新加载页面并单击第二个元素，则仅显示背景而不显示对话框。

代码：

<div class="modal fade" id="deleteSecureDialoge" data-keyboard="true" data-backdrop="static" role="dialog">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" id="close" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Warning</h4>
        </div>
        <div class="modal-body">
            <p>Are you sure to delete {{item._id}}?</p>
        </div>
        <div class="modal-footer">
            <button type="button" id="delete" class="btn btn-danger btn-sm" ng-click="deleteItem(item)" data-dismiss="modal">Delete</button>
            <button type="button" id="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
    </div>
</div>

在我的其他文件中，它绑定

<div class="form-group">
            <span ng-include='"templates/buttons.jsp"'></span>

任何想法导致这个问题的原因是什么？

Answer 1

以下代码将在单击删除按钮时提供确认窗口。请填写您的内容。

HTML部分

  <form >
    <button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> Delete</button>
    </form>
    <div id="confirm" class="modal hide fade" style="background: blanchedalmond;">
      <div class="modal-body">
       <h1>  
        Are you sure to delete?
      </h1></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="delete">Yes</button>
        <button type="button" class="btn">No</button>
      </div>
    </div>

JS PART

$('button[name="remove_levels"]').on('click', function(e){
    var $form=$(this).closest('form');
    $('#confirm').modal({ backdrop: 'static', keyboard: false })
});

Bootstrap Modal未在第二个元素上显示

1 个答案: