Modal not opening on IE 11

Question

So I have a modal to display some content to user. It works on all browsers but not on IE 11 and its lower versions.

This is what the text on which modal opens looks like :

<a class="btn btn-link open-modal" href="#">Have a question?</a>

And when I further inspect the code where the content of modal is defined it is like this :

<div tabindex="-1" class="modal fade contact-admin" id="contact-admin" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
        <div class="modal-body">
            <span class="text-center"><strong>Please contact the admin via email</strong></span> <br><br>
            <address>
                <strong>Name:</strong> Mr Saxena <br>
                <strong>Email:</strong> saxena@gmail.com
            </address>
        </div>
            <div class="modal-footer">
            <button class="btn btn-default no" type="button" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
</div>

A little research on some places showed that IE doesn't like the fade class. So I tried removing it but brings no changes.

Anyone who can help with this please

Answer 1

You haven't set any data-attributes to call the modal: href="#contact-admin" data-toggle="modal"

Your href should look something like this.

<a class="btn btn-link open-modal" href="#" data-toggle="modal" data-target="#contact-admin">Have a question?</a>

Working Example:

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <a class="btn btn-link open-modal" href="#contact-admin" data-toggle="modal">Have a question?</a> <div tabindex="-1" class="modal fade contact-admin" id="contact-admin" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-body"> <span class="text-center"><strong>Please contact the admin via email</strong></span> <br> <br> <address> <strong>Name:</strong> Mr Saxena <br> <strong>Email:</strong> saxena@gmail.com </address> </div> <div class="modal-footer"> <button class="btn btn-default no" type="button" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>