Twitter Bootstrap Question posted in

Bootstrap modals won't launch-Twitter bootstrap

The modal doesn’t display any of my images. I tried changing the pictures and code. However, I’m new to this, and I have no clue. Could it be the JavaScript code or the code itself? I’ve tried Atom and Dreamweaver, and I get the same problem.

$(function() {
    $('#site-modal').on('show.bs.modal', function() {
        $(this)
            .find('.modal content img')
            .attr('src', $(event.relatedTarget).data('highres'))
     });
});

There is a broken image link of dome sort.

$(function() {

  $('#site-modal').on('show.bs.modal', function() {
    $(this)
      .find('.modal content img')
      .attr('src', $(event.relatedTarget).data('highres'))
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- CSS style sheet-->

  <!-- Bootstrap CSS -->
  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
  <link href="css/bootstrap-4.2.1.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link href="larry 2.css" rel="stylesheet" type="text/css">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hello, world!</title>
</head>

<body>
  <header id="page-hero" class="site-header">
    <nav class="navbar navbar-expand-md navbar-dark">

      <div class="container-fluid">
        <a class="navbar-brand" href="#page-hero">
          <i class="fas fa-ankh"></i> LarryJ Designs</a>
      </div>

      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="#myTogglerNav" aria-label="Toggle Navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

      <section class="collapse navbar-collapse align" id="myTogglerNav">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="index.html">Home</a>
          <a class="nav-item nav-link" href="about3.html">About </a>
          <a class="nav-item nav-link" href="portfolio2.html">Portfolio</a>
          <a class="nav-item nav-link" href="">Contact</a>
        </div>
      </section>
    </nav>

    <section class="layout-hero d-flex align-items-center text-light text-center">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-11 col-sm-10 col-md-8">
            <h3 class="page-section-title">Larry J designs</h3>
            <p>Conformity is the jailer of freedom and the enemy of growth.” ― John F. Kennedy</p>
          </div>
        </div>
      </div>
    </section>

  </header>
  <section class="layout-card container-fluid">
    <div class="row justify-content-center">
      <div class="col-8 col-sm-12 col-lg-10">
        <div class="card-deck">
          <section class="card my-3">
            <a data-toggle="modal" data-target="#site-modal" data-highres="#" href="business_card.png"> <img class="layout-image img-fluid" src="business_card.png" alt="photo sample"></a>
            <div class="card-body">
              <h4 class=" layout-title card-title">Business Cards</h4>
              <p class="card-text layout-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

            </div>
          </section>
          <section class="card my-3">
            <a data-toggle="modal" data-target="#site-modal" data-highres="#" href="stocklayouts-graphic-design-templates-2.jpg"><img src="stocklayouts-graphic-design-templates-2.jpg" class="card-img-top img-fluid" alt="..."></a>
            <div class="card-body">
              <h4 class="card-title layout-text">Flyers</h4>
              <p class="card-text layout-text"></p>

            </div>
          </section>
          <section class="card my-3">
            <a data-toggle="modal" data-target="#site-modal" data-highres="#" href="website stock.jpg"> <img src="website stock.jpg" class="card-img-top img-fluid" alt="..."></a>
            <div class="card-body">
              <h4 class="card-title layout-title">Webpages</h4>
              <p class="card-text layout-text"> As of this moment we build small webpages, such as porfolios, small business, blogs etc. </p>
            </div>
          </section>
        </div>
      </div>
    </div>
  </section>
  <footer class="site-footer text-light d-flex justify-content-center">
    <section class="layout-social py-5">
      <a class="text-light px-2" href="https://twitter.com/planetoftheweb">
        <i class=" layout-icon fab fa-twitter"></i>
      </a>
      <a class="text-light px-2" href="https://facebook.com/viewsource">
        <i class=" layout-icon fab fa-facebook"></i>
      </a>
      <a class="text-light px-2" href="https://linkedin.com/in/planetoftheweb">
        <i class=" layout-icon fab fa-linkedin"></i>
      </a>
      <a class="text-light px-2" href="https://github.com/planetoftheweb">
        <i class=" layout-icon fab fa-github"></i>
      </a>
      <a class="text-light px-2" href="https://plus.google.com/+RayVillalobos0">
        <i class=" layout-icon fab fa-google-plus"></i>
      </a>
      <a class="text-light px-2" href="https://dribbble.com/planetoftheweb">
        <i class=" layout-icon fab fa-dribbble"></i>
      </a>
      <a class="text-light px-2" href="https://www.flickr.com/photos/planetoftheweb/sets/72157602932636630/">
        <i class=" layout-icon fab fa-flickr"></i>
      </a>
      <a class="text-light px-2" href="https://www.youtube.com/user/planetoftheweb">
        <i class=" layout-icon fab fa-youtube"></i>
      </a>
      <div class="copyright py-4 text-center text-white">
        <div class="container">
          <small>Copyright &copy; Larry J designs 2019</small>
        </div>
      </div>
    </section>

  </footer>
  <article id="site-modal" class="modal fade">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <img data-dismiss="modal" class="img-fluid" src="#" alt="Modal Photo">
      </div>

    </div>
  </article>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> -->
  <script src="js/bootstrap-4.2.1.js"></script>
  <script src="larryj.js"></script>
</body>

</html>
Tags:

3

Answers


  1. 0

    This element does not exist: find('.modal content img')

    You have this one: ".modal-content img"

    Login or Signup to reply.
  2. 0

    Try something similar to the code shown below:
    Try something similar to the code shown below:

    $(function() {
    $('#site-modal').on('show.bs.modal', function(event) {
        var url = $(event.relatedTarget).children().attr('src')
        $('#site-modal')
            .find('img')
            .attr('src', url)
    });
});

    Image display in a modal

    Login or Signup to reply.
  3. 0

    I’ve replicated the example and it works: https://jsfiddle.net/ayj0obwh/

    I think your problem is that you are loading a CSS library outside of <head> and even outside of <html> tags. Try removing it, because you are already loading Bootstrap CSS on <head> tag.

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search