How do I close an open modal?

Question

I copied a template from codepen. The code was very dated and had some old cdn links. Meaning I had to find the updated version for those links. I am so close to making the app completely functional I need the modal to close after opening. I believe it has something to do bootstrap. The code for the links and modal available below.

<head>
        <title>Refugee Stories</title>
        <link rel = "stylesheet" href = "index.css">
        <meta name = "viewport" content="width = device-width,initial-scale=1.0">
        <meta charset="utf-8">
    <!-- jQuery Version 1.11.0 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script> 
<!-- <link rel="stylesheet" href="index.css"> -->
<!-- Script -->

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    </head>
...
    <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2>Refugee Stories</h2>
                            <p class="item-intro text-muted">Html/Css/JavaScript</p>
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/M4yl6ZXC3VY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            <p>Refugee Stories is an application where you can read refugee stories once logged in. As a admin you can review stories  and either approve for the story to make it on the site or decline. As an  user you can submit stories for review. Both roles may view and read stories. </p>
                            <a href="https://refugeestoriesbw.netlify.app/"><button type="button" class="btn btn-primary"><i class="fa fa-times"></i> See Project</button>
                             </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Does this answer your question? [Close Bootstrap Modal](https://stackoverflow.com/questions/16493280/close-bootstrap-modal) — M.A Shahbazi, Jun 05 '20 at 09:39
how you want to open modal as you didn't add any button there — Rupinderpal Thind, Jun 05 '20 at 10:41
your code has jQuery library included 2 times, get rid of one of them. that;s where problem stated — Atul Rajput, Jun 05 '20 at 11:32

Shaikh Kamran Ahmed · Answer 1 · 2020-06-05T12:46:36.010

4

UPDATE: As stated by @Atul in his answer that you remove the duplicate jQuery include and then the below code should work perfectly.

$('#portfolioModal5').modal('hide');

.modal('hide')

Manually hides a modal.

learn more from bootstrap documentation from here

edited Jun 05 '20 at 12:46

answered Jun 05 '20 at 10:17

Shaikh Kamran Ahmed

361
1
6
13

do you get any error? or it just doesn't close the modal? also if it just doesn't close the modal then please show us the code where you are adding $('#portfolioModal5').modal('hide'); – Shaikh Kamran Ahmed Jun 05 '20 at 10:39
I want to have the class close-modal close the modal. I tried this $(".close-modal").click(function(){ $('#portfolioModal5').modal('hide'); I'm currently using codepen – tg marcus Jun 05 '20 at 10:50
not sure if you made a typo in your comment but if you are using it like this $(".close-modal").click(function(){ $('#portfolioModal5').modal('hide'); }) then it should work – Shaikh Kamran Ahmed Jun 05 '20 at 10:54
give ur codepen link, and data-dismiss="modal" will work for you, just give your codepen – Atul Rajput Jun 05 '20 at 11:28

score 1 · Answer 2 · answered Jun 05 '20 at 11:44

Here is the working example. As I mentioned in comments, you have used jQuery twice and not implemented the MOdal Stutrue as per documentation, that's why is not working as you expected

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
  <div class="row mb-4">
    <div class="col text-center">
      <a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#portfolioModal5">Click to open Modal</a>
    </div>
  </div>


<!-- large modal -->
<div class="portfolio-modal modal" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">X</button>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2>Refugee Stories</h2>
                            <p class="item-intro text-muted">Html/Css/JavaScript</p>
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/M4yl6ZXC3VY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            <p>Refugee Stories is an application where you can read refugee stories once logged in. As a admin you can review stories  and either approve for the story to make it on the site or decline. As an  user you can submit stories for review. Both roles may view and read stories. </p>
                            <a href="https://refugeestoriesbw.netlify.app/"><button type="button" class="btn btn-primary"><i class="fa fa-times"></i> See Project</button>
                             </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

How do I close an open modal?

2 Answers2