Modals not working on IE11

Topic: Modals not working on IE11

ldx pro asked 6 years ago

Hi all, first of all congrats for the excellent work! Then, the issue: I can't make modals working on IE11. The same source works perfectly on Firefox, Chrome, Edge, on different OSs, but with IE11 on Win7 modals simply don't appear. I attach a minimal HTML taken from the tutorials and examples from mdbootstrap.com:

<!DOCTYPE html>
<html lang="en"><head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <title>Material Design Bootstrap</title>
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <!-- Bootstrap core CSS -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="css/mdb.min.css" rel="stylesheet">
 <!-- Your custom styles (optional) -->
 <link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Start your project here-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <div class="modal-body">
...
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
</div>
 <!-- SCRIPTS -->
 <!-- JQuery -->
 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="js/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="js/mdb.min.js"></script>
</body></html>

Since I can see examples from "Modals" on mdbootstrap.com site working even on IE11, I guess that there should be something missing from my sources (some include or anything like that). Thank you and kind regards Aldo

ldx pro commented 6 years ago

After a number of attempts, I got rid of this issue on myself: I noticed that something was going wrong in IE11 while downloading the locally-copied JS scripts (jquery, popper and bootstrap). I changed the references to JS scripts, in order to download them from CDN and not locally, as follows. From this: <script type="text/javascript" src="MY_SITE_URL/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="MY_SITE_URL/js/popper.min.js"></script> <script type="text/javascript" src="MY_SITE_URL/js/bootstrap.min.js"></script> <script type="text/javascript" src="MY_SITE_URL/js/mdb.min.js"></script> To this: <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <script type="text/javascript" src="MY_SITE_URL/js/mdb.min.js"></script> (I tried several times to paste-as-code but the editor screwed up the code; hopefully, one can still understand how to solve this issue) Now modals work well on IE11 also. Anyway, I can't guess what was going wrong with the previous configuration. Kind regards Aldo

From this:

To this:

(I tried several times to paste-as-code but the editor screwed up the code; hopefully, one can still understand how to solve this issue)

Now modals work well on IE11 also. Anyway, I can't guess what was going wrong with the previous configuration.

Kind regards
Aldo

Please insert min. 15 characters.

Add comment

Marta Wierzbicka staff answered 6 years ago