How convert bootstap modal v4.0 to v3.0?

Reason:
I have a bootstap model maded in v4.0 and I want it to apply inside me website everytime its shows when a visitor reload the site and the website maded in below the bootstrap v4.0 and now when I paste the modal code inside my website the tags used in my site which using below v4.0 adapts new changes because of modal which made in v4.0

here is a look of my website footer:

here is modal:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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>
</html>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <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>

  
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
$(function() {
    $("#exampleModal").modal('show');
});


</script>



</body>
</html>    

this is the root: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
This link is created a problem can any one have a solution to convert this into v3.0?
any help is appreciated!

You should be able to paste that modal into v3 just using your custom styles.

e.g.

<!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">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <!-- Modal -->
  <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>
</body>
</html>

You should never mix the bootstrap core files for different versions.

2 Likes

thankyou very much for your help PaulOB but I want to show this modal on the page load. also how can I show this modal only the first time to my user when they first visit to my site? some sort of cookiee or localstorage?

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.

3 Likes

PaulOB your are OSM!!! Its work great thankyou so much for the code thankyouuuuuuuuuuuuuuuuuuuuu
both code works great your are all-rounder

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.