~~~
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<style>
*{margin: 0;padding: 0}
.btn{
padding: 0;
}
.tupian img{
width: 100%;
height: 100%;
}
.row div{text-align: center;margin-top: 20px;}
.modal-body{
text-align: center;
/* background-attachment: fixed; */
/* 背景固定 */
}
</style>
<body>
<!-- Button trigger modal -->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="btn btn-primary btn-lg tupian" data-toggle="modal" data-target="#myModal">
<img src="images/item01.jpg" alt="">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="btn btn-primary btn-lg tupian" data-toggle="modal" data-target="#myModal">
<img src="images/item01.jpg" alt="">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="btn btn-primary btn-lg tupian" data-toggle="modal" data-target="#myModal">
<img src="images/item01.jpg" alt="">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="btn btn-primary btn-lg tupian" data-toggle="modal" data-target="#myModal">
<img src="images/item01.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">圖片</h4>
</div>
<div class="modal-body">
<img src="images/item01.jpg" alt="">
</div>
</div>
</div>
</div>
<script src="bootstrap/js/jquery-3.3.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
~~~
