Question

29

Bootstrap 4 .modal('hide') not working

rated 0 times [ 34] [ 5] / answers: 1 / hits: 23925 / 6 Years ago, wed, february 7, 2018, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kyrona

Add To Favorites

Follow

Total Points: 422

Total Questions: 111

Total Answers: 97

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

answered 6 Years ago clifford · Accepted Answer

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.