I wrote some javascript code to show a modal after page load and click a button to redirect another url. That worked fine. But now I need it to be done with an external javascript file. Thanks in advance. Here is what I did:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pop Up</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Here is your message Title</h4>
</div>
<div class="modal-body">
<p>Here is your message details</p>
Exit
</div>
</div>
</div>
</div>
<script>
$(".modal").on("hidden.bs.modal", function () {
window.location = "https://www.google.com/";
});
</script>
</body>
</html>
How do I do this with an external javascript file?
Just create a new file with '.js' extension.
example: create 'scripts.js'
and write :
$(document).ready(function(){
$("#myModal").modal('show');
});
$(".modal").on("hidden.bs.modal", function () {
window.location = "https://www.google.com/";
});
and then in the html file before add:
you need to add correct file to the file in 'src' attribute'.
Copy everything in you <script> tag and put it in an external js file. You can link this file in your html with the following:
<script src="js/YourJSFile.js"></script>
$(document).ready(function(){
$("#myModal").modal('show');
$(".modal").on("hidden.bs.modal", function () {
window.location = "https://www.google.com/";
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pop Up</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/YourJSFile.js"></script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Here is your message Title</h4>
</div>
<div class="modal-body">
<p>Here is your message details</p>
Exit
</div>
</div>
</div>
</div>
</body>
</html>
script "the js file" must be add just before the closing body tag
Related
I am trying to show a modal by calling a JS file function.
<div onclick="UsernameModal.showModal()" style="font-family: 'irsans-medium'; margin-right: 10px;color: #343CF9">some text</div>
The JS file and the function look as the following.
var UsernameModal = UsernameModal || {};
$(document).ready(function () {
UsernameModal.showModal = function () {
console.log("hi");
$('#usernameModal').modal({
backdrop: 'static',
keyboard: false
});
$('#usernameModal').modal('show');
}
.
.
.
}
The log method in the function gets invoked and also the JQuery is working as it goes into the $ sign. And no errors gets shown in the console after executing.
My _Layout.cshtml file is as below.
.
.
.
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/common.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js">
</script>
<script src="~/js/login.js"></script>
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
I do not know why the modal show function does not get executed. And the modal is located as below.
<div class="modal fade" id="usernameModal" tabindex="-1" role="dialog" aria-labelledby="usernameModal" aria-hidden="true">
<div class="modal-dialog center-modal">
<div class="modal-content">
<div class="modal-body">
#await Html.PartialAsync("../../Views/Password/_UsernameModal", new InputModel())
</div>
</div>
</div>
</div>
First, aria-labelledby="usernameModal" needed to be aria-labelledby="usernameModalLabel".
Second, instead of calling twice modal, once with the show argument , then again with some options setup, you can put them all together.
$('#usernameModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
Third, the order of the loaded css and script matters. The bootstrap css should go first, then the jQuery library, then the popper library (if applicable), finally the bootstrap library.
Fourth, you must be sure all DOM have being loaded prior trying to use them. You can use the jquery's ready, such as:
$(function() {
// Code that will be run after all DOMs in the page are loaded
});
Below is a working example:
$(function() {
$('#btnShowModal').bind('click', () => {
console.log("show modal");
$('#usernameModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js"></script>
<button id="btnShowModal">Show Modal</button>
<div class="modal fade" id="usernameModal" tabindex="-1" aria-labelledby="usernameModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#await Html.PartialAsync("../../Views/Password/_UsernameModal", new InputModel())
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I hope this helped you out.
I corrected the order by which the file references where held in my _Layout.cshtml class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<title>something</title>
<link href="~/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/bootstrap-theme.min.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/login.css"/>
<link rel="stylesheet" href="~/css/common.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/common.js"></script>
<script src="~/js/login.js"></script>
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
I want buttons to appear inside popover. The problem here is that the html code appears instead of buttons inside popover. I think there's an issue with this code: $('[data-bs-toggle="popover"]').popover('show');
How can I add buttons with button tag inside popover without changing data-bs-toggle to data-toggle?
<!doctype html>
<html lang="en">
<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.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover" id="example"> Popover on bottom
</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
var popString = "";
popString = popString + "<a href='#'><button class='btn btn-primary' id ='checkout'>Checkout</button></a> <button class='btn btn-primary' id ='clearCart'>Clear Cart</button> "
document.getElementById('example').setAttribute('data-bs-content', popString);
$(document).ready(function(){
$('[data-bs-toggle="popover"]').popover('show');
});</script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
$(function() {
$("[data-toggle=popover]").popover({
html: true,
placement:"bottom",
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
body{
width100%;
height:100vh
}
.flex-center{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-center">
<button class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</button>
</div>
<div id="a2" class="hidden">
<div class="popover-heading">This is the heading for #2</div>
<div class="popover-body">
This is the body for #2<br> With <b>html</b> content
<button class="btn btn-primary mx-auto">Button</button>
</div>
</div>
You'd need data-bs-html="true" attribute as well for html code to work in the popover.
I tried your code, and as much as I could tell buttons inside the popover aren't working, however anchor tags are. I don't like this approach myself, but that is what I could make work for now. Here's a fiddle: JSFiddle It basically meant converting your buttons in the content to anchor tags.
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'top',
html : true,
title : 'User Info <a href="#" class="close" data-dismiss="alert">×
</a>',
content : '<div class="media"><img src="images/avatar-tiny.jpg"
class="mr-3" alt="Sample Image"><div class="media-body"><h5 class="media-
heading">Jhon Carter</h5><p>Excellent Bootstrap popover! I really love
it.</p></div></div>'
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
});
</script>
<div class="wrapper">
<button type="button" class="btn btn-primary" data-toggle="popover">Click
Me</button>
</div>
<!DOCTYPE html>
<html lang="en">
<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.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<button
type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?"
>
Click to toggle popover
</button>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
<script>
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>
</body>
</html>
When you use Bootstrap 5 Use this Script code you can easily Make Popover.
Either You can try jquery but I thinks it's not needed.
<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.5.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
<div class="container">Popover Example</div>
$(document).ready(function(){$('[data-toggle="popover"]').popover();});
I need to put some functions on the header of my site, but the functions just not working...
I'm building my site with AngularJs and Javascript. Next my index.html:
<!DOCTYPE html>
<html ng-app="adminApp">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<head>
<base href="/">
</head>
<body>
<div ng-include="'app/components/include/header.html'"></div>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.62/vfs_fonts.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/test/test.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factories/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>
</body>
</html>
As you can see, i'm calling the header file on the ng-include div.
And the my header.html file:
<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<a id="admin-logo"><img src="/logo.png" /></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hide" id="login" align="center">
<button type="button" class="btn btn-user" id="jump-btn">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout">Log out</button>
</div>
So, at this point, everything works fine: the header appears on every page. But if i need a function on the logout button, how can i do it?
I've tried creating a home.js file like next one:
(function(){
var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};
angular
.module('adminApp')
.component('adminHead', head);
headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}
})();
And then, added the function on the button with ng-click:
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout" ng-click="getOut()">Log out</button>
</div>
But the function is not working.
Someone knows why is not working and help me with and example if it's possible, please? If i add the function on the html between script tags works, but i need to find if it's possible with the $scope.
Hope you can help me. Thanx in advance
Declare a controller:
angular
.module('adminApp')
.controller('adminHeadCtrl', headCtrl);
headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}
Instantiate the controller with the ng-controller directive:
<div class="menu-out" ng-controller="adminHeadCtrl">
<button type="button" ng-click="getOut()" id="logout">Log out</button>
</div>
For more information, see
AngularJS Developer Guide - Controllers
My scenario is to open a modal that contains iframe ,inside the iframe having button while onclick button i need to close the modal and refresh the parent window
So far i tried
Parent page :
<!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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
// $('iframe').content ().find('#close').click(function(){
// alert('entred');
// });
$('#myModal').contents().find('#close').click(function() {
alert('click');
});
});
</script>
<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">
<iframe src="modal.html"></iframe>
</div>
</div>
</body>
</html>
Child Page
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<p>Hello Session has expeired</p>
<button id="close" type="button">OK</button>
</div>
</body>
</html>
In Parent Page, update the below script which will create a global function called closeModal which will 1) Close the modal dialog and 2) Reloads the current page.
<script type="text/javascript">
window.closeModal = function () {
$('#myModal').modal('hide');
window.location.reload();
};
</script>
In Child Page, on Close button click, simply call the closeModal method of the parent.
<script type="text/javascript">
$(document).ready(function () {
$('#close').click(function () {
window.parent.closeModal();
});
});
</script>
You'll need to give your iFrame an ID, and then attach a handler to either it, or an element within:
document.getElementById("yourIFrameId").contentDocument.addEventListener(...);
This should to do what you need:
ParentPage.html:
<iframe src="iframe.html"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$(document).on('eventhandler', function() {
$('#myModal').modal('hide');
});
});
</script>
ChildPage.html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('#close').click(function () {
parent.$(parent.document).trigger('eventhandler');
});
</script>
This question already has answers here:
How can I auto hide alert box after it showing it? [duplicate]
(4 answers)
Closed 8 years ago.
I know i can accomplish this with jquery but I'd like to do it in pure javascript. The problem is I can't include any file links.
I'll have an iframe loading in the content for those few seconds.
Here's my jquery and it works like it should.. but i need help with getting it to function the exact same just using js.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<script language="javascript">
$(document).ready( function() {
$('#overlay').modal('show');
setTimeout(function() {
$('#overlay').modal('hide');
}, 5000);
});
</script>
<div class="modal hide fade" id="overlay">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Leader Board</h4>
</div>
<div class="modal-body">
<p><iframe src="formers" width="90%" height="90%"></iframe></p>
</div>
</div>
Any help would be greatly appreciated. Thank you.
So you just want to show an element onload and hide after 5 seconds?
<script>
window.onload=function(){
document.getElementById('overlay').style.display = 'block';
setTimeout(function(){
document.getElementById('overlay').style.display = 'none';
},5000);
};
</script>
This should work
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script language="javascript">
function popUp() {
document.getElementById('#overlay').modal('show');
setTimeout(function() {
document.getElementById('#overlay').modal('hide');
}, 5000);
});
</script>
</head>
<body onload="popUp()">
<div class="modal hide fade" id="overlay">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Leader Board</h4>
</div>
<div class="modal-body">
<p><iframe src="formers" width="90%" height="90%"></iframe></p>
</div>
</div>
</body>