Question

在我的网站中，我使用了多个删除记录，每个记录都使用了复选框。

一切都运转良好。我工作就像当我从表中选中记录并单击删除按钮并显示模式以进行删除确认是正常过程但表没有记录我点击按钮删除简单警报显示“没有记录被选中”但是之后这个改变模态弹出窗口显示并在几秒钟后消失。

这是删除按钮，显示模态。

<button 
                  data-toggle="modal" title="Delete makes" class="open-Delete btn btn-success" href="#Delete"
                  type="button" class="btn btn-success">Delete Makes</button>

这是单击删除按钮时调用的功能

<script type="text/javascript">

$('.chkSelectAll').click( function()
{
  $('.chkNumber').prop('checked', $(this).is(':checked'));
});

function Delete()
{
    var id = $("#bookId").val();
    var dataString="oper=delete&id="+id;
    $.ajax({
        url: "calls/makes-oper.php",
        type:'post',
        data:dataString,
        success: function(html)
        {
            if($.trim(html)=='success')
            {
              $('#Delete').modal('hide');
              window.location='makes.php';
            }
        }
    });
}
$(document).on("click", ".open-Delete", function() 
{
        var chkId="";
        $('.chkNumber:checked').each(function() 
        {
          chkId += $(this).val() + ",";
        });
        chkId =  chkId.slice(0,-1);
        if(chkId=="")
        {

          alert("No row is selected.!");
          $('#Delete').modal('hide');
        }
        else
        {
          $(".modal-body #bookId").val( chkId );
          //$('#Delete').modal('show');
        }
}); 
</script>

Answer 1

如果我理解正确，你需要＆＃34;删除制作＆＃34;如果选中某些复选框，则按钮仅打开模式。如果未选中任何复选框，则需要显示警报并且不打开模式。是吗？

听起来，现在，您正在收到警告和模式。这也是正确的吗？

Bootstrap有自己的事件来显示和隐藏模态。此事件由您的＆＃34;删除制作＆＃34;上的data-toggle="modal"属性控制。按钮。您需要删除此属性。这将阻止Bootstrap在单击按钮时显示模态。由于模态不会显示，因此您不必隐藏它。只需显示警报。

接下来，您需要调整事件处理程序以手动显示模式。您可以使用$("#Delete").modal("show");手动显示模态。看起来您的代码中已经有了这一行，但已注释掉了。我认为你走在了正确的轨道上。

Answer 2

我知道这件事有一段时间被问到了，但是如果有其他人遇到同样的问题，我会解决同样的问题：

HTML：

<button type="button" class="btn btn-default" id="deleteButton">
    <i class="fa fa-trash"></i> Delete 
</button>

<div class="modal fade" id="deleteUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <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" id="myModalLabel">Confirm Deletion</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-align-center">
                        <!--<div class="form-group">-->
                            <button type="button" class="btn btn-success" id="delete" data-dismiss="modal">
                                Yes
                            </button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">
                                No
                            </button>
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS：

$('#deleteButton').click(function() {
    var checkedValues = $('.checkbox:checked').map(function() {
        return this.value;
    }).get();

    if (checkedValues.length !== 0) {
        $('#deleteUserModal').modal('show');
    }
});

bootstrap模态显示并隐藏在操作中

2 个答案: