Bootstrap close modal not working

Question

I have two button here that are being used to close the modal. The first is the close icon and the other one is cancel button, both use data-dismiss to close the modal. However, both of them are not working. I am using the same code for another modal and there they are working fine. Any guesses?

<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal">
    <div class="modal-dialog">
        <div id="timeSelectModalContent" class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <label>
                <input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox">
                <label class="checkbox-label">Thursday, 08:00 pm.</label>
            </label>
            <br>
            <label>
                <input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox">
                <label class="checkbox-label">Thursday, 09:30 pm.</label>
            </label>
            <div id="time-modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button>
            </div>
        </div>
    </div>
</div>

Answer 1

remove the "fade" class.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

change to

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Fade is an effect, if you remove fade, your modal will not have fade effect. The several problem which cause this issue is not call modal with right method.

Wrong method : $("#myModal").show();

Right method : $("#myModal").modal('show');