【发布时间】：2021-10-22 21:58:25
【问题描述】：
我有一个简单的设计，其中一个图像位于一个居中的 div 内。图像上方是一个带有 h1 元素的半透明文本框。我希望在单击 h1 后弹出一个 bootstrap 4 模态组件。我已经按照各种教程来构建模态，但我似乎无法让它工作。我不确定问题可能是什么。
如果有人可以看一下并给我一些指导，将不胜感激。
CodePen：https://codepen.io/dayna-j/pen/RMZdej?editors=0010
HTML：
<head>
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
</head>
<body>
<div class='img-div'>
<img src="https://image.ibb.co/eZcdEn/nature_3084841_1920.jpg" alt='close up of grass'/>
<div class='textBox-div'>
<h1 class = no-select data-toggle="modal" data-target="#Modal">Click Me</h1>
</div>
<!-- Modal (inside img-div) -->
<div id="Modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
CSS：
.no-select {
user-select: none;
}
html {
box-sizing: border-box;
background-color: black;
// overflow:hidden;
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
body{
background: #232526;
// background: papayawhip;
display: flex;
justify-content: center;
align-items: center;
// border: 5px solid green;
// border-radius: 1000px;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.container-fluid {
position: relative;
height: 100%;
width: 100%;
}
.img-div {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
img {
// position: relative;
max-height: 500px;
max-width: 850px;
width: 100%;
border: 1px solid grey;
// border-radius: 1000px;
}
.textBox-div {
position: absolute;
margin: 0 auto;
text-align: center;
width: 100%;
background: whitesmoke;
opacity: .5;
}
.textBox-div h1 {
font-family: 'Fredericka the Great', cursive;
margin: auto 0;
font-weight: 900;
}
@media screen and (max-width:400px)
{
h1 {font-size: 1.5em;}
}
@media screen and (max-width:200px)
{
h1 {font-size: 1em;}
}
JavaScript：
$( document ).ready(function() {
$('#Modal').modal('hide');
$('h1').on('click', function(){
$('#Modal').modal('show');
});
});
【问题讨论】：
-
如果你打开浏览器控制台，你会看到一些错误——特别是，Bootstrap 需要 popper.js。只要您在控制台中仍然存在错误，您的 JS 就不太可能按预期工作，因此如果您能解决这些问题，那么问题所在/在哪里就会更清楚。
-
问题不在于 Bootstrap 的 beta 版本似乎没有
.modal功能。您可以使用稳定的maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js
标签： css twitter-bootstrap responsive-design bootstrap-4