我正在从 Bootstrap 应用模态，但它没有正确关闭。当我点击右上角的关闭按钮时，它崩溃了，当我点击模态上的其他任何地方时，它正常关闭。我尝试了很多次，但这个问题一直存在。
html,
body {
height: 100%;
}
body {
padding-top: 20px;
background: #f9e0b5 ;
background-size:100%;
background-repeat: repeat-y;
}
.pro{
background:linear-gradient(white, #e7d5b5);
margin:10px 40px 0px;
height:250px;
border-radius:30px;
box-shadow:5px 5px 5px black;
cursor:pointer;
}
#pro4{
position:relative;
left:370px;
}
.pro-caption{
font-size:17px;
font-weight:bold;
font-family:"Comic Sans MS", cursive, sans-serif;
color:#6b412b;
background:linear-gradient(white, #f5e5d7);
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- row starts-->
<div class="row">
<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1">
<!--modal1-->
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog">
<!--modal1 content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title"> Fresh Milk:Bru Gold Coffee Machine</h3>
</div>
<div class="modal-body">
<img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px">
<h4><u><b>Key Features:</b></u></h4>
</div>
</div>
</div></div>
<figure><img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"></figure>
<figcaption class="pro-caption"> Fresh Milk:Bru Gold Coffee Machine</figcaption>
</div>
</div>最佳答案
如您所见，您已将 data-target 属性设置为 modal1 div，因此您需要有单独的 div，即 <div id="modal1"></div>您可以在哪里放置您评论过的内容。
<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"></div>
基本上，您已将您的内容放置在切换弹出窗口的类中，您需要将其取出并将其放置在 <div id="modal1"></div> 中。 , 其余的都很好。
请尝试以下代码。希望对您有所帮助。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- row starts-->
<style>
html,
body {
height: 100%;
}
body {
padding-top: 20px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
background: #f9e0b5 /*#f9cf86*/ ;
background-size:100%;
background-repeat: repeat-y;
}
.pro{
background:linear-gradient(white, #e7d5b5);
margin:10px 40px 0px;
height:250px;
border-radius:30px;
box-shadow:5px 5px 5px black;
cursor:pointer;
}
#pro4{
position:relative;
left:370px;
}
.pro-caption{
font-size:17px;
font-weight:bold;
font-family:"Comic Sans MS", cursive, sans-serif;
color:#6b412b;
background:linear-gradient(white, #f5e5d7);
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"></div>
<div id="modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title"> Fresh Milk:Bru Gold Coffee Machine</h3>
</div>
<div class="modal-body">
<img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px">
<h4><u><b>Key Features:</b></u></h4>
</div>
</div>
</div>
</div>
</div>
<figure><img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"></figure>
<figcaption class="pro-caption"> Fresh Milk:Bru Gold Coffee Machine</figcaption>
<!--modal over-->`
</body>
</html>
关于html - 我正在从 Bootstrap 应用模态，但它没有正确关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40779247/