How to load modal on page load instead of button trigger in bootstrap?


#1

I have a bootstrap modal and I want it on the page load.
here is modal code:

<!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>

I already tried these below scripts but none of them work!
1.<script>
$(function() {
$("#myModal").modal('show');
});
</script>

2.$(document).ready(function () {
$('#myModal').modal('show');
});

3.<script type="text/javascript">
$(window).load(function () {
$('#myModal').modal('show');
});
</script>

button trigger is working perfect also On localhost its working perfect but on hosting server none of them work! any clue?
any help is appreciated.


#2

The $(document).ready() variant works for me, as does a plain

$('#myModal').modal('show')

at the ènd of the body...

Can you provide a link?


#3

I think it may be the same question as here unless it's another problem that's cropped up?