引导程序模式不会启动

时间：2019-05-23 14:26:27

标签： javascript html css bootstrap-4

模态不显示我的任何图像。我尝试更改图片和代码。但是，我对此并不陌生，也没有任何线索。可能是JavaScript还是代码本身？我已经尝试过atom和Dreamweaver，但遇到了同样的问题。

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

半球形的图像链接断开了。

$(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>

4 个答案:

答案 0 :(得分：0)

此元素不存在find（'。modal content img'）

您有这个“ .modal-content img”

答案 1 :(得分：0)

您可以尝试类似于下面显示的代码吗？

$(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

答案 2 :(得分：0)

我已经复制了示例，并且可以正常运行：https://jsfiddle.net/ayj0obwh/

我认为您的问题是，您正在<head>之外甚至在<html>标记之外加载CSS库。请尝试将其删除，因为您已经在<head>标签上加载了Bootstrap CSS。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

答案 3 :(得分：0)

这又是我的代码。将其标识为CSS还是可以的。解决这个问题已经有几个星期了。 

$(function() {
  $('#site-modal').on('show.bs.modal', function() {
    $(this)
      .find('.modal content img')
      .attr('src', $(event.relatedTarget).data('highres'))
  });
});
@import url('https://fonts.googleapis.com/css?family=Merriweather:300|Source+Sans+Pro:200,400,600');

:root {
  /* 
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
*/
  /* Override Variables */
  --font-family-sans-serif: 'Source Sans Pro', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
	--gray-dark: #404040;}

  /* Page Variables */
  --font-family-serif: Merriweather, serif;
  --color-text: var(--gray-dark);
  --font-family-text: var(--font-family-serif);
	--secondary: #6c757d;
}

family-sans {
  font-family: var(--font-family-sans-serif);
}

body {
  font-family: var(--font-family-text);
  color: var(--color-text);
  font-weight: 200;
	background-image:url(jonathan-bowers-531776-unsplash.jpg);
	 background-repeat: no-repeat;
  background-size: auto;
	background-position:top;
}

.site-header {
  background: url("");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
	;
}

.site-header .layout-hero {
  min-height: 20vh;
}

.site-header .page-section-title .header-title {
  font-size: 3em;
  font-family: var(--font-family-sans-serif);
  font-weight: 200;
}

.site-header .page-section-text.page {
  font-size: 1.2em;
}

.layout-social .layout-icon {
  font-size: 2em;
}


img {
  max-width: 75%;
  height: auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

h2,h5{text-align:center;
text-transform:uppercase;
}

h1{font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";text-transform: capitalize;}
h3{color:red;}

@media screen and (max-width: 768px) {
  .site-header .navbar-collapse {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 10px;
  }
}



.site-header .nav-link {
  position: relative;
  padding-bottom: 0;
  margin-bottom: 2px;
}

.site-header .nav-link:before {
  content: '';
  position: absolute;
  width: 100%;
  max-width: 100px;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: var(--red);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-out;
}

.site-header .nav-link:hover:before {
  visibility: visible;
  left: 0;
	transform: scaleX(1);}

.animated {
  visibility: visible !important;
}
h1{text-transform:uppercase;}
<!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 portfolios , 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>

相关问题
最新问题