Question

我连续有4张图像，我想在Bootstrap中用作模态按钮。如何在引导程序中创建一行充当模态按钮的图像？

Answer 1

如果您使用的是bootstrap 3，可以尝试以下操作：

HTML

<a href="#" id="modal">
    <img id="myimg" src="http://www.yourdomain.com/assets/images/imgtoEnlarge.jpg" >
    Click here to Enlarge
</a>

<!-- Creating the bootstrap modal where the image will show-->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Image preview</h4>
      </div>
      <div class="modal-body">
        <img src="" id="imagepreview" style="width: 240px; height: 134px;" >
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JavaScript的：

$("#modal").on("click", function() {
   $('#imagepreview').attr('src', $('#myimg').attr('src')); 
   $('#imagemodal').modal('show'); 
});

在bootstrap中创建图像模式按钮

1 个答案: