gpt4 book ai didi

html - 我正在从 Bootstrap 应用模态,但它没有正确关闭

转载 作者:太空宇宙 更新时间:2023-11-03 22:49:22 26 4
gpt4 key购买 nike

我正在从 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">&times;</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">&times;</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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com