Bootstrap 4.modal ('hide') does not work

Question

I create a very simple, but slightly modified, able to display iFrame. I open the model using the javascript function and the modal call function provided by bootstrap. In my modal I placed an icon to close the modal. If I click on this close icon, the modal will not hide. I am using javascript onclick with the .modal('show') and .modal('hide') functions provided by bootstrap. Modal does not hide, but my console log is running.

I know that there are many questions with a similar problem, but these questions did not contain the answer I was looking for. I know that css in html is just wrong, but I did some quick prototypes, so please forgive me for that.

code

Open link for modal

 <a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a> 

Modal html

 <!-- Modal --> <div class="modal fade" id="iframe_feedback" style="padding-top: 20px;"> <i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" onClick="closeModal()"></i> <div class="body-modal" style="max-width: 90%; margin: 0 auto; overflow: scroll;"> <div id="clip" style="overflow:scroll;"> <iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe> </div> </div> </div> 

Js

 function openFeedback(link) { $('#iframe_feedback').modal('show'); console.log(link); }; function closeModal() { $("#iframe_feedback").modal('hide'); console.log('Close fired'); }; 

My main problem is that my modal is showing, console.log also triggered to show and hide, but after clicking the close button, the modality is not hidden.

Answer 1

TL; DR;

It seems that you need a modal-dialog div inside your modal for .modal('hide') or data-dismiss="modal" .

-

I fixed your problem by changing the body-modal class to modal-dialog . (and changed the close icon to red so that it can be seen more easily in the snippet)

 function openFeedback(link) { $('#iframe_feedback').modal('show'); console.log(link); }; function closeModal() { $("#iframe_feedback").modal('hide'); console.log('Close fired'); }; 

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a> <div class="modal fade" id="iframe_feedback" style="padding-top: 20px;"> <i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: red; top: 40px; cursor: pointer; z-index: 1700;" onClick="closeModal()">close</i> <div class="modal-dialog" style="max-width: 90%; margin: 0 auto; overflow: scroll;"> <div id="clip" style="overflow:scroll;"> <iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe> </div> </div> </div> 

But now the modal bit is messy (visually).

I would recommend you check modal documents . With the features turned on in Bootstrap 4, you will probably disable most of your extra (inline) CSS and JS, and thus make sure that everything works well in most browsers.

Answer 2

You can use data-reject = "modal" to close the modal

<i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" data-dismiss="modal" ></i>

Answer 3

If you remove the fade class, it works fine.

I think you need a modal-dialog div if you intend to use the fade class. Also, use only one type of close / open modality, either the js path or data-toggle/data-dismiss .