Question

我无法使用javascript将照片显示在模态中。当我点击一张照片时，我得到的是一个空白的模态弹出窗口。我相信这是因为我还在学习javascript和相关问题没有多大帮助。非常感谢我得到的所有帮助

模态HTML代码

<!-- photos -->
<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image1.jpg" data-target="#trslphotos"><img src="images/image1.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image2.jpg" data-target="#trslphotos"><img src="images/image2.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image3.jpg" data-target="#trslphotos"><img src="images/image3.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image4.jpg" data-target="#trslphotos"><img src="images/image4.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image5.jpg" data-target="#trslphotos"><img src="images/image5.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image6.jpg" data-target="#trslphotos"><img src="images/image6.jpg" alt="recent photo"></a>
        </div>
    </div>
</div>
<!-- ./photos -->

<!-- modal -->
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body"><img src="" class="img-responsive"></div>
            <div class="modal-footer">
                <a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div>
<!-- ./modal -->

这是用于调用图片的javascript

function displayPhotos(url) {
 //this should load photos
 $('.modal-body img').attr('src',url);
 //show modal
 $('#trslphotos').modal();
}

Answer 1

以下是适合您的解决方案。我只是在显示的模态上调用了displayPhotos()函数。

Fiddle

$('#trslphotos').on('shown.bs.modal', function (a, b,c) {
 var clickedImageUrl = a.relatedTarget.childNodes[0].src;
  displayPhotos(clickedImageUrl);
})

function displayPhotos(url) {
 console.log(url);
 $('.modal-body img').attr('src',url);
 $('#trslphotos').modal();
}

现在它可以正常使用您的代码。希望它能帮到你。

Answer 2

我不知道你的问题是什么，可能这对你有所帮助。试着点击trslphotos点击。

$(function() {
  $('#trslphotos').on('show.bs.modal', function() {
    $('.modal-body img').attr('src', "https://i.stack.imgur.com/nukKn.jpg");
    //$('#trslphotos').modal('show');
  });
  $('#trslphotos').on('click', function() {
    //$('.modal-body img').attr('src', "https://i.stack.imgur.com/nukKn.jpg");
    $('#trslphotos').modal('show');
  });
});

<link href="https://bootswatch.com/united/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image1.jpg" data-target="#trslphotos">
        <img src="images/image1.jpg" alt="recent photo">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image2.jpg" data-target="#trslphotos">
        <img src="images/image2.jpg" alt="recent photo">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image3.jpg" data-target="#trslphotos">
        <img src="images/image3.jpg" alt="recent photo">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image4.jpg" data-target="#trslphotos">
        <img src="images/image4.jpg" alt="recent photo">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image5.jpg" data-target="#trslphotos">
        <img src="images/image5.jpg" alt="recent photo">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image6.jpg" data-target="#trslphotos">
        <img src="images/image6.jpg" alt="recent photo">
      </a>
    </div>
  </div>
</div>
<!-- ./photos -->

<!-- modal -->
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <img src="" class="img-responsive">
      </div>
      <div class="modal-footer">
        <a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>

如何使用Javascript在bootstrap模式中显示图像

2 个答案: