One way is to call it like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-body {
display:flex;
padding:0;
}
.mybtn {
width: calc(50% - 20px);
float: left;
display: inline-block;
background: #e42022;
color: #FFF;
text-align: center;
padding: 5px;
box-sizing: border-box;
margin: 10px;
font-weight: bold;
}
.modal-footer {
padding:0;
}
.mybtn:hover {
opacity: 0.9;
}
.join {
background: #1b1464;
}
.right3 ul {
padding: 0px;
margin: 0px;
}
.right3 ul li {
background-image: url('https://s33.postimg.cc/502ku2hsv/correct_sign.png');
list-style: none;
padding-left:30px;
background-repeat: no-repeat;
background-position: left center;
background-size: 15px;
font-size:15px;
}
.code {
color:#23B14D;
font-weight:700;
}
.left3 {
width:40%;
padding:0 10px 0 0;
box-sizing:border-box;
min-height:2px;
}
.right3 {
width: 60%;
padding: 0px;
box-sizing: border-box;
min-height: 278px;
}
.left3 img {
width:100%;
margin-top:0px;
}
.left3 {
background:url('https://s33.postimg.cc/d5kms1ya7/player1.png') no-repeat center top / auto 100%;
}
.right3 p {
margin:0;
font-weight:bold;
}
.preventclose {
position:fixed;
top:0;
width:100%;
height:5px;
}
.left4 {
width: 100%;
float: left;
padding:0px;
box-sizing: border-box;
}
.bbtitle {
font-family: 'Poppins', sans-serif;
color: #1b1464;
display: block;
font-weight: bold;
text-transform: capitalize;
font-size: 26px;
padding: 10px 10px 10px 0;
}
.right4 {
width: 100%;
float: left;
color:#FFF;
padding:0 10px;
box-sizing: border-box;
}
.firstlink {
display: block;
padding: 13px 10px 10px;
background: none;
}
.endtext {
padding: 10px;
font-size: 13px;
color: #999;
font-weight: bold;
margin-top: 21px !important;
display: block;
float: left;
}
.dollar25 {
color:red;
font-weight: bolder;
}
.right3 p {
padding:5px;
margin-top: 18px;
font-size:14px;
text-align: justify;
}
.ifl-image {
width: 80px !important;
}
/* Close Button */
.popup-close {
width:30px;
height:30px;
padding:4px 2px 0px;
display:inline-block;
position:absolute;
top:0px;
right:0px;
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
background:#1b1464;
font-family:Arial, Sans-Serif;
font-size:20px;
text-align:center;
line-height:100%;
color:#FFF !important;
}
.popup-close:hover {
-webkit-transform:translate(50%, -50%) rotate(180deg);
transform:translate(50%, -50%) rotate(180deg);
background:red;
text-decoration:none;
}
@media(max-width:767px) {
.left3 {
width:30%;
}
.right3 {
width:70%;
}
.left3 img {
width: 100%;
margin-top: 18px;
}
}
@media(max-width:550px) {
.bbtitle {
text-align: center;
font-size: 22px;
}
.left3 {
height:200px;
background-size:cover;
background-position:center top;
}
.right3 {
width:100%;
}
.off {
font-size:60px;
}
.left3 img {
width: 200px;
margin-top: 18px;
}
}
@media(max-width:450px) {
.bbtitle {
text-align: center;
font-size: 18px;
}
.left3 {
height:200px;
background-size:cover;
background-position:center top;
}
.right3 {
width: 90%;
}
.off {
font-size:60px;
}
.left3 img {
width: 200px;
margin-top: 160px;
}
.right3 ul li {
font-size:13px;
}
.right3 p {
font-weight:bold;
font-size: 11px;
text-align: justify;
}
}
</style>
</head>
<body>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="border:5px solid red;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">International Football League</h5>
</div>
<div class="modal-body">
<div class="left3"><img src="http://intfl.com/themes/front//images/logo1.png" class="ifl-image"></div>
<div class="right3">
<ul>
<li>Want to win $100K?</li>
<li>Want to win ownership of the IFL?</li>
<li>Want to help pick team names?</li>
<li>Want to help pick team logos?</li>
<li>Want to help pick players for teams</li>
<li>Want to help hire staff?</li>
<li>Want to help fire staff?</li>
</ul>
<div class="buttons123"><a href="#" class="join mybtn">Join</a><a href="#" class="notnow mybtn">Not Now</a></div>
<p>Well there's no need to want anymore here's your chance. Just become a member of the International Football League for just<i class="dollar25">$25</i>to help call the shots.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary popup-close " data-dismiss="modal">X</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#myModal').modal('show');
</script>
</body>
</html>
You can add a cookie script and check if its been set. This really isn’t my area but something like this I guess:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-body {
display:flex;
padding:0;
}
.mybtn {
width: calc(50% - 20px);
float: left;
display: inline-block;
background: #e42022;
color: #FFF;
text-align: center;
padding: 5px;
box-sizing: border-box;
margin: 10px;
font-weight: bold;
}
.modal-footer {
padding:0;
}
.mybtn:hover {
opacity: 0.9;
}
.join {
background: #1b1464;
}
.right3 ul {
padding: 0px;
margin: 0px;
}
.right3 ul li {
background-image: url('https://s33.postimg.cc/502ku2hsv/correct_sign.png');
list-style: none;
padding-left:30px;
background-repeat: no-repeat;
background-position: left center;
background-size: 15px;
font-size:15px;
}
.code {
color:#23B14D;
font-weight:700;
}
.left3 {
width:40%;
padding:0 10px 0 0;
box-sizing:border-box;
min-height:2px;
}
.right3 {
width: 60%;
padding: 0px;
box-sizing: border-box;
min-height: 278px;
}
.left3 img {
width:100%;
margin-top:0px;
}
.left3 {
background:url('https://s33.postimg.cc/d5kms1ya7/player1.png') no-repeat center top / auto 100%;
}
.right3 p {
margin:0;
font-weight:bold;
}
.preventclose {
position:fixed;
top:0;
width:100%;
height:5px;
}
.left4 {
width: 100%;
float: left;
padding:0px;
box-sizing: border-box;
}
.bbtitle {
font-family: 'Poppins', sans-serif;
color: #1b1464;
display: block;
font-weight: bold;
text-transform: capitalize;
font-size: 26px;
padding: 10px 10px 10px 0;
}
.right4 {
width: 100%;
float: left;
color:#FFF;
padding:0 10px;
box-sizing: border-box;
}
.firstlink {
display: block;
padding: 13px 10px 10px;
background: none;
}
.endtext {
padding: 10px;
font-size: 13px;
color: #999;
font-weight: bold;
margin-top: 21px !important;
display: block;
float: left;
}
.dollar25 {
color:red;
font-weight: bolder;
}
.right3 p {
padding:5px;
margin-top: 18px;
font-size:14px;
text-align: justify;
}
.ifl-image {
width: 80px !important;
}
/* Close Button */
.popup-close {
width:30px;
height:30px;
padding:4px 2px 0px;
display:inline-block;
position:absolute;
top:0px;
right:0px;
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
background:#1b1464;
font-family:Arial, Sans-Serif;
font-size:20px;
text-align:center;
line-height:100%;
color:#FFF !important;
}
.popup-close:hover {
-webkit-transform:translate(50%, -50%) rotate(180deg);
transform:translate(50%, -50%) rotate(180deg);
background:red;
text-decoration:none;
}
@media(max-width:767px) {
.left3 {
width:30%;
}
.right3 {
width:70%;
}
.left3 img {
width: 100%;
margin-top: 18px;
}
}
@media(max-width:550px) {
.bbtitle {
text-align: center;
font-size: 22px;
}
.left3 {
height:200px;
background-size:cover;
background-position:center top;
}
.right3 {
width:100%;
}
.off {
font-size:60px;
}
.left3 img {
width: 200px;
margin-top: 18px;
}
}
@media(max-width:450px) {
.bbtitle {
text-align: center;
font-size: 18px;
}
.left3 {
height:200px;
background-size:cover;
background-position:center top;
}
.right3 {
width: 90%;
}
.off {
font-size:60px;
}
.left3 img {
width: 200px;
margin-top: 160px;
}
.right3 ul li {
font-size:13px;
}
.right3 p {
font-weight:bold;
font-size: 11px;
text-align: justify;
}
}
</style>
</head>
<body>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="border:5px solid red;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">International Football League</h5>
</div>
<div class="modal-body">
<div class="left3"><img src="http://intfl.com/themes/front//images/logo1.png" class="ifl-image"></div>
<div class="right3">
<ul>
<li>Want to win $100K?</li>
<li>Want to win ownership of the IFL?</li>
<li>Want to help pick team names?</li>
<li>Want to help pick team logos?</li>
<li>Want to help pick players for teams</li>
<li>Want to help hire staff?</li>
<li>Want to help fire staff?</li>
</ul>
<div class="buttons123"><a href="#" class="join mybtn">Join</a><a href="#" class="notnow mybtn">Not Now</a></div>
<p>Well there's no need to want anymore here's your chance. Just become a member of the International Football League for just<i class="dollar25">$25</i>to help call the shots.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary popup-close " data-dismiss="modal">X</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
$(document).ready(function() {
if (!Cookies.get("popup")) {
$("#myModal").modal('show');
Cookies.set('popup', 'popped');
}
});
</script>
</body>
</html>
Note that cookies don’t seem to work locally in Chrome so you will need to test online or in another browser.