there is a button
<button onclick="showModal('#Url.Action("EditUserProfile","Profile",null,Context.Request.Scheme)','ویرایش پروفایل کاربر');"
class="btn btn-warning w-100 mb-3">
ویرایش اطلاعات
</button>
there is a modal
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="modal-body" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
when I click the button I want show modal only using vanilla JavaScript
async function showModal(url, title) {
let modalEl = document.querySelector('#modal');
let bsModal = Bootstrap.Modal.getInstance(modalEl);
let modalTitle = document.querySelector('#modal-title');
let modalBody = document.querySelector('#modal-body');
let requestPage = await fetch(url);
let requestPageResponse = await requestPage.text();
modalTitle.innerHTML = title;
modalBody.innerHTML = requestPageResponse;
bsModal.show();
}
when I try this I get this error
Uncaught (in promise) ReferenceError: Bootstrap is not defined
at showModal
<!DOCTYPE html>
<html lang="fa-IR" dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="https://kit.fontawesome.com/0842d2bf89.js" crossorigin="anonymous"></script>
<link href="~/Bootstrap/bootstrap.css" rel="stylesheet" />
<link href="~/css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main-wraper">
<vc:top-nav></vc:top-nav>
<div class="main-content">
#RenderBody()
</div>
<vc:footer></vc:footer>
</div>
<script src="~/Bootstrap/bootstrap.min.js"></script>
<script src="~/js/navbar.js"></script>
#RenderSection("scripts", false)
</body>
</html>
You need to make sure the twitter-bootstrap script is above your showModal() function
Something like:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- This script must be above -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<!-- This script must be below your boostrap script -->
<script src="YOUR SHOW MODAL ASYNC FILE PATH"></script>
</body>
</html>
In your showModal function
Change this line
let bsModal = Bootstrap.Modal.getInstance(modalEl);
to this
let bsModal = new boostrap.Modal(modalEl)
See docs
Related
Goal:
Close the bootstrap 5 modal with javascript code after displaying the alert message.
Problem:
I cannot make the function myFunction to be working and also closing the modal after displaying alert message with javascript code.
Info:
*You should not use 'data-bs-dismiss="modal"'
JSBIN:
https://jsbin.com/sileqajiho/edit?html,js,output
Thank you!
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" onclick="myFunction()" >Start</button>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
alert("test")
}
<script>
</body>
</html>
var myModal = document.getElementById('staticBackdrop');
var modal = bootstrap.Modal.getOrCreateInstance(myModal)
modal.show()
https://jsbin.com/ciqocavoge/edit?html,js,output
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<h3>Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<button type="button" onclick="test1()">Close me via script</button>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" onclick="myFunction22()" >Start</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
function test1() {
alert("sdf");
modalInstance.hide()
}
</script>
</body>
</html>
-------------
var modalInstance = null;
var modelElem = document.querySelector('#myModal');
modelElem.addEventListener('shown.bs.modal', function (){
modalInstance = bootstrap.Modal.getInstance(modelElem);
});
well I far as I know you have to use new , this is an example of a toast
var myToast = new bootstrap.Toast(toastDiV, opts)
myToast.show()
because they are classes you have to reference a new instance
for bootstrap 5.0 use the following code
var genericModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(genericModalEl)
modal.hide()
I'm a beginner and I'm trying to add a Javascript event to the delete button so that a modal appears for application with Spring Boot Java.
I'm not sure if my bootstrap connection is done correctly.
I have a LayoutDefault where I call the other layers. In LayoutDefault I'm adding the links for bootstrap connection.
Can anyone help me trigger the event?
modal's html:
<!DOCTYPE html>
<html xmlns="http://wwww.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<div class="modal" id ="confirmationExclusion" tabindex="-1" data-backdrop="static">
<div class="modal-dialog">
<form action="/title" method="post">
<input type="hidden" name="_method" value="DELETE"/>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">You have sure?</h5>
<button type="button" class="close-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<span></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
<button type="button" class="btn btn-primary">delete</button>
</div>
</div>
</form>
</div>
</div>
</html>
button to activate modal:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{LayoutDefault}"
>
<head>
<meta charset="UTF-8">
<title>Pesquisa</title>
</head>
<body>
<section layout:fragment="content">
....
<button type="button" data-toggle="modal" data-target="#deleteModal" th:attr="data-codigo=${titulo.codigo}, data-descricao=${title.describle}"
class="btn btn-link" title="Delete">
<i class="material-icons">delete</i>
</button>
<script src="/js/cob.js"></script>
....
</section
</body>
</html>
my file js for trigger the event cob.js
$('#deleteModal').on('show.bs.modal', function(event){
var button = $(event.relatedTarget);
var codTitle = button.data('cod');
var describleTitle = button.data('describle');
var modal = $(this);
var form = modal.find('form');
var action = form.data('url-base');
if(!action.endsWith('/')){
action += '/';
}
form.attr('action', action + codTitle);
modal.find('.modal-body span').html('Are you sure you want to delete the record <strong>'+describleTitle+'<strong>');
});
LayoutDefault:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://ultraq.net.nz/thymeleaf/layout"
>
<head>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header th:replace = "Header"></header>
<section layout:fragment="content">
<p> Main content </p>
</section>
<!--
not found
<script src="/js/popper.min.js"></script>
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
-->
</body>
</html>
<script src="/js/popper.min.js"></script>
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
there is a path problem in the src of the javascript change to
<script th:src="#{/js/popper.min.js}"></script>
<script th:src="#{/js/jquery-3.6.0.min.js}"></script>
<script th:src="#{/js/bootstrap.min.js}"></script>
I have scanned several other posts relating to this, but I cannot work out a working solution sadly.
Any help greatly appreciated.
I am trying to stop the modals flashing visibility briefly while the page is loading. I have a 3D model that loads using OpenwebGL, so need a few seconds to load. The modals flashing at the start looks untidy.
I'm not sure of the best approach to stop the modals from loading until the 3d model has finished loading.
This is the HTML code for the page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D Web Interactive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:type" content="website">
<meta name="generator" content="Verge3D 3.0.1">
<script src="ie_compat.js"></script>
<script src="webxr-polyfill.js"></script>
<script>var polyfill = new WebXRPolyfill();</script>
<script src="ammo.js"></script>
<script src="v3d.js"></script>
<script src="City_20_01c.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="City_20_01c.css">
</head>
<body>
<div id="container">
<div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
</div>
<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="myModal01" role="dialog" >
<div class="modal-dialog" style="display:none">
<!-- 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>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Modal Example 02</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="myModal02" 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>Automotive 02</p>
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Me again.
Ok appreciate a lot of questions on the forum regarding this topic, but didn't find an easy fit.
I eventually figured out a solution using the following from various ideas combined.
So for anyone else trying to fix this issue in the future try the following:
Put the modal div's in a new div. Make the parent div invisible using a style comment in the header. Add this to the opening body comment onload="showdiv();",
Then add a function showdiv script at the bottom of your body.
Here is the same HTML above with the new adjustments:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D Web Interactive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">
<meta property="og:type" content="website">
<meta name="generator" content="Verge3D 3.0.1">
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="media/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="media/favicon-16x16.png">
<link rel="manifest" href="media/manifest.json">
<link rel="mask-icon" href="media/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<script src="ie_compat.js"></script>
<script src="webxr-polyfill.js"></script>
<script>var polyfill = new WebXRPolyfill();</script>
<script src="ammo.js"></script>
<script src="v3d.js"></script>
<script src="City_20_01c.js"></script>
<link rel="stylesheet" type="text/css" href="City_20_01c.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#modaloff {
visibility: hidden;
}
</style>
</head>
<body onload="showdiv();">
<div id="container">
<div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
</div>
<div id="modaloff">
<div class="container" id="modaloff01" >
<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="myModal01" 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>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Modal Example 02</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="myModal02" 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 02</h4>
</div>
<div class="modal-body">
<p>Automotive 02</p>
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function showdiv() {
setTimeout(function () {
document.getElementById("modaloff").style.visibility = "visible";
}, 5000);
}
</script>
</body>
</html>
I have an input type="CheckBox" with an onclick function to launch a modal if the checkbox is clicked. But it will not launch the modal?
I inserted an alert(id); under the if statement & it did alert "chkfb", so I know the result is "TRUE", but the $('#Searchfb').modal(); will not work.
Added the scripts at the bottom of
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<script type="text/javascript">
function myCheckBoxFunction(id) {
var checkBox = document.getElementById(id);
if (checkBox.checked == true) {
$('#SearchFb').modal();
} else {}
}
</script>
<input id="chkFb" type="checkbox" onclick="myCheckBoxFunction(this.id);" />
<label for="chkFb"> Fb Services</label>
<!-- Modal -->
<div class="modal fade" id="Searchfb" 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>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/
umd/popper.min.js" integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/
js/bootstrap.min.js" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
https://getbootstrap.com/docs/4.0/components/modal/#modalshow
$('#Searchfb').modal('show');
The problem is you id name
<div class="modal fade" id="Searchfb" role="dialog">
Remember, the id name must be the same in you script
$('#SearchFb').modal('show');
So just need change for fb or Fb in the html or the js code. Happy code!
** I am new to javascript and willing to learn it on my own interest . I am unable to execute a bootstrap modal after 5 seconds to pop up on the page using setTimeout in javascript. I dont need it in Jquery. Please someone assist me on this **
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Task_1</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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container main_div">
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Please click to watch the video again..</p>
<div class="popup_img">
<img src="images/alert.png">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setTimeout(function() {
$('#overlay').modal('show');
}, 12000);
</script>
</body>
</html>
Wrap around the $(function () {}) and change 12000 to 5000.
$(function() {
setTimeout(function() {
$('#overlay').modal('show');
}, 5000);
});
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container main_div">
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Please click to watch the video again..</p>
<div class="popup_img">
<img src="//placehold.it/200x75?text=alert" />
</div>
</div>
</div>
</div>
</div>
</div>