Bootstrap 4 .modal('hide') not working

Question

I am creating a really simple, but a bit tweaked, modal for showing an iFrame. I open the model by a javascript function and the modal call function provided by bootstrap. In my modal I've placed an icon for closing the modal. If I click on this close icon the modal won't hide. I use a javascript onclick with the .modal('show') and .modal('hide') functions provided by bootstrap. The modal doesn't hide, but my console log is fired.

I know there are many questions out there with a similiar problem but these questions did not contain the answer I was looking for. I know that css in html is just not right, but I was doing some fast prototyping so please forgive me for that.

Code

Open link for modal

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

The 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>

The 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 up, also fires the console.log for both show and hide but after clicking on the close button the modal doesn't hide.

Answer 1

TLDR;

It seems like you need the modal-dialog div inside your modal for .modal('hide') or data-dismiss="modal" to work.

--

I got your problem fixed by changing the body-modal class to modal-dialog. (and changed your close icon to red so that it can be seen easier 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 is bit messy (visually).

I'd recommend that you check the modal docs. With the included features in Bootstrap 4 you would probably strip off most of your extra (inline) CSS and JS, and in this way ensure that your everything works well in the most of browsers.

Answer 2

If you remove the fade class it works fine.

I think that you need a modal-dialog div if you intent to use the fade class. Also, use just one type of closing/opening modals, either the js way or the data-toggle/data-dismiss.

Answer 3

You can use data-dismiss="modal" for 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>