Bootstrap modal: class=“modal fade” causing proble

Question

I am trying to get a bootstrap modal tutorial to work in my view.ejs file. But the class="modal fade" seems to be causing a problem. If I remove the class="modal fade" the modal permanently shows up, but if I keep it in the code nothing happens when I click on the button.

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal"  role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

From other problems I've found other people to have, I tried to search for fade in other CSS files but cannot find anything. Also tried to add this before the code above, didn't help:

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0); // IE9 only
    transform: translate(0, 0);
}

I am new to web development and might be missing something small, please help me

Answer 1

There might be something wrong you are doing, create your own fiddle and share it here.! I used your code, and its working fine! I just added the modal and fade classes to it, and it opens only when I click on the button

https://jsfiddle.net/happy2deepak/e5aukzge/

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Modal Header</h4>

            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>