CODEWITHSUNDEEP
javascripttwitter-bootstrapmodal-dialogbootstrap-modal
CheeseCake
CheeseCake

Reputation: 131

Bootstrap Modal Disappearing Immediately Without Being Viewed or Closed

I'm really new to Modals and Javascript for that matter and I would like to implement this Modal but it only shows for a quarter of a second then disappears without it being touched or anything.

I have read others' questions about it before and yes, I only have bootstrap.min.js loaded onto my index file. I don't have the bootstrap-modal.js.

Here's my code: 

<!-- First Item -->
                <div class="item col-md-4 col-sm-6 col-xs-12 mix apps">
                    <a href="#" data-toggle="modal" data-target="#portfolio-item1"> 
                        <img src="http://unsplash.it/680/380?random=4" alt="item" class="img-responsive">
                        <div class="overlay">
                            <div class="content">
                                <h3>Project Name</h3>
                                <p>Description? Category maybe?</p>
                            </div>
                        </div>
                    </a>
                </div>

<!-- Modal-->
        <div id="portfolio-item1" tabindex="-1" role="dialog" class="modal fade">
        <div role="document" class="modal-dialog">
          <div class="modal-content">
            <div data-dismiss="modal" aria-label="Close" class="close-btn"><i class="icon-close"></i></div>
            <div class="container-fluid">
              <div class="row">
                <div class="mockup col-md-8">
                  <div class="device-mockup macbook_2015 portrait gold">
                    <div class="device">
                      <div class="screen"><img src="http://unsplash.it/680/380?random=4" alt="..." class="img-responsive"></div>
                    </div>
                  </div>
                </div>
                <div class="text col-md-4">
                  <h2>Item Name</h2>
                  <p class="lead">Desription.</p><a href="#" class="btn btn-unique">View on Behance</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
<!-- End Modal-->

Any suggestions is greatly appreciated!

EDIT: Here's a jsfiddle for it.

EDIT: Here's how my external resources are structured: HEAD:

<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/lightbox.min.css">
<link href="css/theme.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>

FOOTER:

</footer>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/lightbox.min.js"></script>
    <script src="js/plugin.js"></script>
    <script src="js/theme.js"></script>

Upvotes: 1

Views: 3537

Answers (2)

CheeseCake
CheeseCake

Reputation: 131

I figured out what was wrong. Bootstrap JS was being called twice. I had it in the plugin.js and I also had the bootstrap.min.js

Thank you all for your help!

Upvotes: 0

petetetete
petetetete

Reputation: 465

It seems like the problem has to do with your inclusion of external resources. In your application, it's important that you include:

  • jQuery
  • Bootstrap JS
  • Bootstrap CSS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

You can use CDNs or simply add the files to your project and reference them there, but here's an updated jsfiddle in which the only thing that I changed was including the external resources.

Note: jQuery should be included before Bootstrap's JS.

Upvotes: 1

Related Questions