Bootstrap 4 .modal('hide') not working : <p>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 <code>.modal('show')</code> and <code>.modal('hide')</code> functions provided by bootstrap. The modal doesn't hide, but my console log is fired. </p>

<p>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.</p>

<p>Code</p>

<p>Open link for modal</p>

<pre><code>&lt;a href="#" onClick="openFeedback('getBootstrap')"&gt;Klik hier om de website te bekijken&lt;/a&gt;
</code></pre>

<p>The modal html</p>

<pre><code>&lt;!-- Modal --&gt;
&lt;div class="modal fade" id="iframe_feedback" style="padding-top: 20px;"&gt;

  &lt;i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" onClick="closeModal()"&gt;&lt;/i&gt;

  &lt;div class="body-modal" style="max-width: 90%; margin: 0 auto; overflow: scroll;"&gt;

    &lt;div id="clip" style="overflow:scroll;"&gt;
        &lt;iframe src="/dashboard" style=" width:2600px; height: 1600px;"&gt;&lt;/iframe&gt;
    &lt;/div&gt;

  &lt;/div&gt;  

&lt;/div&gt;
</code></pre>

<p>The JS </p>

<pre><code>function openFeedback(link) {
    $('#iframe_feedback').modal('show');
    console.log(link);
};

function closeModal() {

    $("#iframe_feedback").modal('hide');
    console.log('Close fired');

};
</code></pre>

<p>My main problem is that my modal is showing up, also fires the <code>console.log</code> for both show and hide but after clicking on the close button the modal doesn't hide.</p>
