My design features an image within a centered div, overlaid with a semi-opaque textbox containing an h1 element. I'm trying to implement a Bootstrap 4 modal component that pops up when the h1 is clicked. Despite following various tutorials for creating the modal, I can't seem to make it work. I'm not sure what the issue might be.
If someone could review my code and provide some guidance, I would greatly appreciate it.
You can view the CodePen here: https://codepen.io/dayna-j/pen/RMZdej?editors=0010
The 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>
The 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;}
}
The JavaScript:
$( document ).ready(function() {
$('#Modal').modal('hide');
$('h1').on('click', function(){
$('#Modal').modal('show');
});
});