<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-8 BPAA_Announce">
<div class="card mb">
<img class="card-img-top" src="https://gobowling.com/portals/0/images/Promos/GoBowlingAmerica_B2CWebBanner.png" alt="Card image cap">
<div class="card-body mb">
<h5 class="card-title">Strike Ten Entertainement Presents</h5>
<p class="card-text">A Proven Have a Ball League Format that's ready <br />when You're Ready to get America Bowling Again</p>
<a href="https://www.stemarketing.com/america" class="btn btn-lg btn-primary">Get Details Now <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
.mb.card-body{
text-align: center;
}
.mb.btn{
border-radius: 0;
box-shadow: 0.5px 1px 2px hsla(0, 0%, 20%, 1);
}
.mb.btn:hover{
transform: translateY(-2px);
box-shadow: 2px 2px 5px hsla(0, 0%, 20%, 1);
}
.mb.card{
border-radius: 0px / 0px;
overflow: hidden;
box-shadow: 0.5px 1px 2px hsla(0, 0%, 20%, 1);
}
.BPAA_Announce h5{
color:#d71a21;
font-weight:900;
font-size:1.8em;
}
.BPAA_Announce p{
font-weight:400;
text-align:center;
text-transform:uppercase;
font-size: 1.1em;
}
.BPAA_Announce .card{
background-color:black;
color:#fff;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
setTimeout(function() {
$('#myModal').modal();
}, 2000);
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
