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

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.