I'm trying to create a cookie which expires in 30 sec. If the users refresh the page between this 30 sec, the popup should not pop just when cookie has expired. Users should see it if they refresh the page after 30 sec. My problem is that it keeps popping up, it does not stop. How I can stop that?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Cookie JS for Modal -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
<script>
function createCookie(name) {
debugger;
var date = new Date();
date.setTime(date.getTime()+(30*1000));
// alert(date);
var expires = "; expires="+date.toString();
document.cookie = name+"="+expires+"; path=/";
//alert(document.cookie);
}
function showbanner()
{
document.write('<div class="container-fluid"><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> <h3>REGISTER FOR FALL SESSION</h3></div><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-6"> <img src="gym.png" alt="gym_promo" style="width:304px;"></div><div class="col-xs-12 col-sm-6"><h3> Reserve Your Spot Today </h3><p> EMAIL : PLAYATGYM#GMAIL.COM </p><p>OR CALL : 514-795-4266 </p> </div></div></div> </div> </div></div></div>');
}
</script>
</head>
<body>
<script>
var ban = document.cookie;
createCookie('banner');
if(ban==""){
showbanner();
}
</script>
</body>
</html>
I would use localStorage over cookies. Don't worry about expiration, just save the current date on load and check if it is more than 30 seconds than the last load:
var lastVisited = window.localStorage.getItem('last visited');
console.log(
'It has been',
Date.now() - 5000 > Date.parse(lastVisited) ? 'more' : 'less',
'than 5 seconds since your last visit.'
)
window.localStorage.setItem('last visited', new Date());
Full page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Cookie JS for Modal -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myModal").modal('show');
});
</script>
<script>
function showBanner(name) {
var lastVisited = window.localStorage.getItem('last visited');
if (lastVisited == null || Date.now() - 5000 > Date.parse(lastVisited)) {
document.write('<div class="container-fluid"><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> <h3>REGISTER FOR FALL SESSION</h3></div><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-6"> <img src="gym.png" alt="gym_promo" style="width:304px;"></div><div class="col-xs-12 col-sm-6"><h3> Reserve Your Spot Today </h3><p> EMAIL : PLAYATGYM#GMAIL.COM </p><p>OR CALL : 514-795-4266 </p> </div></div></div> </div> </div></div></div>');
}
window.localStorage.setItem('last visited', new Date());
}
showBanner();
</script>
</head>
<body>
</body>
</html>
Related
The following is the full testing code. The example is running on
http://public.eitan.ac.il/modal/modal-video.html
I am trying to run a youtube video in a pop up window using Modal, but after closing the window, in Firefox the audio keep on playing. In chrome its working OK.
Any solutions? 10x
var mobileDetect = new MobileDetect(window.navigator.userAgent);
/*
$(document).ready(function(){
$("#myModal").on('hidden.bs.modal', function (e) { $("#myModal #iframeYoutube").attr("src", $("#myModal #iframeYoutube").attr("src"));
});
*/
$(document).ready(function(){
$("#myModal").on("hidden.bs.modal",function()
{ $("#iframeYoutube").attr("src","#");
})
})
function changeVideo(vId){
var iframe=document.getElementById("iframeYoutube");
iframe.src="https://www.youtube.com/embed/"+vId+"?autoplay=1&modestbranding=1&rel=0&showinfo=0";
if (mobileDetect.mobile()) {
window.location = "https://www.youtube.com/watch?v=" + vId;
return;
}
$("#myModal").modal("show");
}
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="modal.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type='text/javascript'src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.2/mobile-detect.min.js"></script>
</head>
<body>
<button class="main-btn">Watch</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria- hidden="true" style="color:white">×</span></button>
</div>
<div class="modal-body">
<iframe id="iframeYoutube" width="700" height="394" src="https://www.youtube.com/embed/e80BbX05D7Y" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
problem is in your hidden.bs.modal function, replace # by _blank
$(document).ready(function(){
$("#myModal").on("hidden.bs.modal",function()
{ $("#iframeYoutube").attr("src","_blank");
})
})
I am trying to make a modal using components in AngularJS but it is throwing the error "Failed to load the HTML file".
How can I make that work?
It is also showing the following error: angular.js:14642 Error: [$compile:tpload]
and that too two times.
Any idea to make that work and if you can explain where did it went wrong. That would be highly greatful.
Here are my files.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Bootstrap Modal using Component</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<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>
<script src="app.js"></script>
<script src="component.js"></script>
</head>
<body>
<div>
<button type="button" class ="btn btn-danger" data-toggle="modal" data-target="#logBTModal">What's New</button>
<!-- Modal Starts -->
<log-modal></log-modal>
</div>
</body>
</html>
app.js
(function(){
'use strict';
var app = angular.module('myApp', []);
})();
Component.js
var app = angular.module('myApp');
app.component("logModal", {
templateUrl: "logModalTemp.html",
bindings: { name: '#'},
controller: function(){
this.title = "This is the first Modal that I have created!!"
}
});
LogModalTemp.html
<script type="text/ng-template" id="logModalTemp.html">
<div id="logBTModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{$ctrl.title}}</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
</div>
</div>
</div>
</script>
there is a small mistake.
check templateUrl: "logModalTemp.html" it should be templateUrl: "LogModalTemp.html"
Just for your reference https://plnkr.co/edit/0fAVzmQKiPX8junM3vxN?p=preview
I have an instagram iframe that get 9 random images with href links (for pictures) and span with same background. So I would like to open it in popup like gallery.
I use the Bootstrap for popup, but there is only first one or last one picture open in popup.
<a data-toggle="modal" data-target="#myModal1" href="'.$thumbnail.'" class="image"><span style="background-image:url('.$thumbnail.');"> </span></a>
<div id="myModal1" class="modal fade" role="dialog" style="overflow-y: hidden;">
<div class="modal-dialog">
<div id="pic" class="modal-content" style="background-image:url('.$thumbnail.'); ></div>'
</div>
</div>
Could you help me?
I've done it!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.css">
</head>
<body>
<a data-toggle="lightbox" href="'.$thumbnail.'" class="image"><span id="" style="background-image:url('.$thumbnail.');"> </span></a>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
});
});
});
</script>
</body>
</html>
Demo is here[http://www.jquery-az.com/boots/demo.php?ex=17.0_1]
I'm working on a solution that displays a list of thumbnails that are medical images. We have a requirement that states if a user clicks a thumbnail a Bootstrap modal should open that display the image (jpg, png or dicom) using the cornerstone.js library.
Using cornerstone seems pretty straightforward. I setup a quick plunker here.
Here's the code for the working plunk:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="cornerstone.js"></script>
<script src="exampleImageIdLoader.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imageId = 'example://1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</head>
<body>
<div class="container">
<h1>This works just fine...</h1>
<br>
<div id="dicomImage" style="width:512px;height:512px;">
</div>
</div>
</body>
</html>
I can't seem to figure out why the images are not loading when I use the same code in a Bootstrap modal. The plunk that I'm trying to get working is here.
Here's the code for the broken plunk:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="cornerstone.js"></script>
<script src="exampleImageIdLoader.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imageId = 'example://1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</head>
<body>
<div class="container">
<h1>When this modal is opened the canvas looks like it's drawn at 0px x 0px...</h1>
<br />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" 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">
<div id="dicomImage" style="width:512px;height:512px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
After hours or trying to figure it out I figured I would see if anyone out there has any ideas. It looks like the plunk with the modal is drawing the canvas at 0x0 pixels...
Any thoughts or help would be GREATLY appreciated. Thanks all.
Update 6/26
I may have found a potential workaround, but it's not as clean as I would like it to be. I also haven't tested it by playing a series of CT images.
My thoughts are to use the working solution from the first plunk and to call .hide() on #dicomImage on document.ready. Then, when a user clicks a thumbnail, I will use:
$(".modal-body").appendTO("#dicomImage);
Not the cleanest solution, but it could work...
below is my HTML model,
<
And below is my JavaScript.
$(document).ready(function() {
alert("Script is on");
$("#portfolioModal1").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$( "#portfolioModal1" ).on('shown', function(){
alert("Shown!");
});
});
$("button").click(function find_route_time()
{
// This function is tested and is working fine.
});
I tried solution from many tutorials, but this is not working. I am unable to understand why? My javascript should generate alert when the Model Opens up but nothing happens.
And below is the link,
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" data-target="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/EAST-CLICK.jpg" class="img-responsive" alt="">
</a>
Here is the fix for your code:
Add Button to your html code as showing below:
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
Replace your JS code with below code:
$(document).ready(function(){
$("#myBtn").click(function(){
$("#portfolioModal4").modal("show");
});
$("#portfolioModal4").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$("#portfolioModal4").on('shown.bs.modal', function () {
alert('The modal is fully shown.');
});
});
Note - if you want to open popup on page load event then just remove the click event from the script but the issue will be it just going to capture shown event.
let me know if you find this useful.
Here is completed Tested file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Open Popup
<!-- Modal -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
.....................SOME CODE.....................
</div>
</div>
</div>
<script>
$(document).ready(function () {
alert("Script is on");
$("#portfolioModal1").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$("#portfolioModal1").on('shown.bs.modal', function () {
alert("Shown!");
});
});
$("button").click(function find_route_time() {
// This function is tested and is working fine.
});
</script>
</body>
</html>