bootstrap modal showing and hide in operation

Question

In my website i used multiple delete record using putting checkbox with every records.

All thing is working fine. i worked like when i select record using checkbox from table and click delete button and display modal for making confirmation for delete is normal process but table have not record and i am click button delete simple alert is display with "No record is selected" but after this alter modal popup is display and disappears in seconds.

This is button for delete and modal is display.

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

This is the function which is call when delete button is click

<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

If I am understanding you correctly, you want the "Delete Makes" button to open the modal only if some checkboxes are checked. If no checkboxes are checked, you want to display an alert and not open the modal. Is that right?

It sounds like, right now, you are getting the alert and the modal. Is that also correct?

Bootstrap has its own event that shows and hides the modal. This event is controlled by the data-toggle="modal" attribute on your "Delete Makes" button. You need to remove this attribute. This will prevent Bootstrap from showing the modal when the button is clicked. Since the modal will not be shown, you will not have to hide it. Just show the alert.

Next, you will want to adjust your event handler to show the modal manually. You can manually show the modal with $("#Delete").modal("show"); . It looks like you have that line in your code already, but commented out. I think you were on the right track.

Answer 2

I know this was asked a while back but here's how I resolved the same issue in case anyone else has the same problem:

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');
    }
});