Bootstrap modal hide is not working

Question

Bootstrap modal hide is not working. Alert comes in else. but my modal is not hidden Added bootply. My issue is the same one.

Answer 1

None of the above solutions worked for me. If this is your case, try to imitate click event on the close button (the one which is added dynamically):

<div class="modal" tabindex="-1" role="dialog" id="modal" area-hidden="true" style="display: inline-block;">
        <div class="modal-dialog modal-dialog-centered" role="document">
            ...
        </div>
    <a href="#close-modal" rel="modal:close" class="close-modal ">Close</a></div>
</div>

$('.close-modal').click() should resolve the issue.

Answer 2

I was opening the modal popup when I click on the link using data-toggle="modal" attribute which was bound with that link and trying to close it using javascript but I was failed each time, so when I remove the "data-toggle" attribute and "href" from that link and opened it using javascript then it was closing properly using javascript as well.

from the below few lines of code, you can understand easily

<a href="#CustomerAdvancedModal" data-toggle="modal" class="classShowAdvancedSearch">Advanced Search</a>

I changed the above link to something link this

 <a href="#" class="ebiz-Advanced-Search classShowAdvancedSearch">Advanced Search</a>

After that when I try to close it using javascript, then I become successful

$("#CustomerAdvancedModal").modal('hide');

Answer 3

You are using both modal toggling methods: via Javascript and via data attributes. So your click is firing the modal show as your data attributes set, and your Javascript does not affect this trigger.

Just remove the data attributes and go with the Javascript method:

<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <!-- modal contents -->
</div>

<script type="text/javascript">
$("#buy").click(function () {
    var a = 4;
    if (a == 5) {
        alert("if");
        $('#myModal').modal('show');
    } else {
        alert("else");
        $('#myModal').modal('hide');
    }
});
</script>

Answer 4

I checked your code. Now you compare a == 5. but a is always 4. you may have to check this why you are doing this comparison. Also you need you remove the data-target if you want to open modal from javascript :

<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>

data-target directly opening the modal. Check if this is working.

Answer 5

I had the same problem, my mistake was that I was trying to open the modal window a few times. We must test that the modal window is not already open before trying to open it.

    if (!($("#MyModal").data('bs.modal') || {})._isShown){ 
        $("#MyModal").modal('show');
    }

Answer 6

Try this function

function hideModal(){
    $("#myModal").removeClass("in");
    $(".modal-backdrop").remove();
    $("#myModal").hide();
}