how to create a popup with cookies in javascript? - javascript

I'm trying to create a pop up and set cookies expire in 30 sec and displays a popup when the page loads just once . the problem is my popup it pop ups but my cookies does not work I do not know whats wrong with my code i tired few things but it did not work also i watched few videos.I'm working on this since this morning if you could help me with you are making my day.any help appreciate it in advance.
<!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>
</head>
<body>
<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>
<script>createCookie();</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function createCookie(name, value) {
var date = new Date();
date.setTime(date.getTime()+(30*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = name+"="+value+expires+"; path=/";
}
</script>
</body>
</html>

When you call "createCookie()" you don't pass parameters, and so name and value are undefined, setting the cookie incorrectly.
Also, the script you added to create the cookie will be called when the page loads. Even if the modal isn't shown, it is still loaded, and so the createCookie() function is called. If you want it to be called when the popup pops up, add the line to the jquery you have above:
$(document).ready(function(){
$("#myModal").modal('show');
createCookie("name of cookie","value of cookie");
});

Related

How to hide Bootstrap 5 modal on button click

I have a Bootstrap 5 modal, which is used to download a file by clicking a button. This works fine, but I want the modal to be hidden after clicking the download button, and this is where I'm struggling.
I am attempting to use jQuery to do this. I know that the jQuery library is successfully imported and that my function is being executed because I can display an alert box within the same function, but I can't get the modal to hide.
The full code snippet is pasted below with the script section at the bottom. The key line of code that I am trying to use to dismiss the modal is: -
$('#downloadConfirm1').modal({show : false});
I have also tried the following: -
$('.modal.in').modal('hide');
But neither has worked. I am extremely grateful to anyone who takes the time to read my post. Any suggestions most welcome!
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Java Documentum Services</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<a class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
data-bs-target="#downloadConfirm1"
role="button">Download
</a>
<div class="modal fade" id="downloadConfirm1" tabindex="-1" aria-labelledby="downloadConfirm1"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="downloadModalLabel">Confirm download</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Download Docx_test_file.docx?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<a href="files/dummy.pdf" download="dummy.pdf">
<button type="button" id="download_button1">Download</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$('#download_button1').click(function() {
alert("Hello! I am an alert box!!");
$('#downloadConfirm1').modal({show : false});
});
</script>
</html>
Bootstrap 5 modal dropped jQuery so that is why you cannot hide the modal with jQuery. You should save your modal instance in the moment of initialization.
Afterwards you can use this code to hide your modal.
Ref: Bootstrap 5 Modal#hide
var modalInstance = new bootstrap.Modal(document.getElementById('downloadConfirm1'));
var modal = document.getElementById('downloadConfirm1');
modalInstance.hide(modal);
var myModalEl = document.querySelector('#scheduleMeetingModal');
var myModal = bootstrap.Modal.getOrCreateInstance(myModalEl);
myModal.hide();

Bootstrap Modals, - takes way too long to load, since webpage went live

I have a wierd situation, where my webpage used to load just fine, before I put it online with hosting and domain. Now the Modal, that's supposed to popup on click, takes so long to load (in particularly through safari, firefox and IOS) that it undermines the whole purpose of the page. And so it's a real problem. At this point it seems to load just fine in chrome though.
I have tried several things, for example thoroughly checking my FTP-client, deleting, editing code, re-uploading but at this point, nothing has worked. Can anyone offer some insight as to where I go wrong?
window.onload = function() {
const span = document.querySelectorAll(".PopUp");
span.forEach(LIelm => {
LIelm.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
const projectNode = e.target.parentNode.parentNode;
if (!projectNode.matches('.Project, .modal-content')) return;
e.preventDefault();
if (projectNode.matches('.Project')) {
document.getElementById(projectNode.dataset.modal).style.display = "block";
} else {
projectNode.parentNode.style.display = "";
}
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="ModalPopUp.js"></script>
</head>
<body>
<div class="content">
<ul style="list-style: none;">
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">
Lirma Type
</span>
<span id="year">
2019
</span>
<div class="Describtion">
<p>Typedesign</p>
<br>
<span class="PopUp">Images</id>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
<script src="ModalHide.js"></script>
<script src="pExpand.js"></script>
What seems to take so long to load are the images so I see in Chrome it does not take so long because it is using the cache memory if you clean it and run it again it takes about 20 seconds
1.-chrome no cache
2.-chrome cache
Try using an image compressor to reduce weight and improve download time
https://compressjpeg.com/es/

dynamically creating buttons with dynamic id calling a function not working

The scenario is, a hyperlink below is toggling a modal as well as creating two buttons inside modal(using javascript having a dynamic id--inspect for button id).
The requirement is on the click of verifybtn0, the rejectbtn0 should disable and viceversa.
In plunker attached, alert is not reached(mentioned in plunker).
Here is, plunker link http://plnkr.co/edit/KgB8yPtcmxYJzQCWB3PJ?p=preview
For more understanding, have a look at plunker.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<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>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script src="script.js"></script>
</head>
<body>
<div id="annexureModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width: 40%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" id="closebtn" >×</button>
<h4 class="modal-title">Annexure List</h4>
</div>
<div class="modal-body text-center" style="background-color: #fff;height: 500px;width:100px;">
<div class="col-xs-12 rmpm">
<table class="table" id="tableAnnexure" style="height:430px;">
<tbody>
<tr>
<td colspan= "2" style="">
<div class="" id="verifybtndiv" style='width:auto;float:left;background:red; '></div>
<div class="" id="rejectbtndiv" style='width:auto;float:left;background:green; '></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Annexure
<script type="text/javascript">
function createVerifyRejectbtn(id){
alert("annexureLink clicked");
var html= "";
html = "<button type='button' class='btn btn-success' id='verifybtn"+id+" ' onclick='disablebtn(this.id)' >Verify</button>";
$("#verifybtndiv").html(html);
html = "<button type='button' class='btn btn-warning' id='rejectbtn"+id+" ' onclick='disablebtn(this.id)' >Reject</button>";
$("#rejectbtndiv").html(html);
}
function disablebtn(id){
var idd = id;
// alert(typeof(idd));
alert(idd);
if(idd === "verifybtn0"){
alert("verifybtn0"); /* here alert is not reaching*/
document.getElementById(id).disabled = false;
document.getElementById("rejectbtn0").disabled = true;
}
else if(idd ==="rejectbtn0"){
alert("rejectbtn0"); /* here alert is not reaching*/
document.getElementById(id).disabled = false;
document.getElementById("verifybtn0").disabled = true;
}
}
</script>
</body>
</html>
First you need to understand how Javascript and DOM works.
When you load your page, the first thing that loads is DOM ( your HTML content ), then once DOM loads, all the javascript events (like Click, mouseover) are registered.
When you dynamically create HTML elements , the events will not be registered because your DOM has already loaded .
Inorder to rebind the newly inserted elements and events, you have to do Dynamic Binding using Jquery. Look at the below link on how to do it
Event binding on dynamically created elements?

bootstrap modal button click event not fired on first time

i am new to twitter bootstrap .i am using the bootstrap 3
and this is my html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Samples</title>
<script src="scripts/jquery1.10.2.min.js"></script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-3.1.1-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" />
<style>
.banner {color:#FF0000;}
</style>
<script>
$(document).ready(function(){
$("#MyModal5").on('hidden.bs.modal',function(){
$("#btnYes").on('click',function(e){
var $myMod = $(this);
var id = $myMod.data('cust-id');
if(id=='y'){
alert("You clicked yes button");
}
});
});
});
</script>
</head>
<body>
<!-- -------------------------------------------------------------------- -->
<div class="modal fade" id="MyModal5">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-title">
<label style="color:#FF6600;">Confirmation</label>
</div>
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>This may cause to make an additional hit to server. Are you sure you want to continue ?</label>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-sm" id="btnYes" data-cust-id="y" data-dismiss="modal">Yes</button>
<button class="btn btn-danger btn-sm" id="btnNo" data-cust-id="n" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- -------------------------------------------------------------------- -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<label>If you want to visit google</label>Click here
</div>
</div>
</div>
</body>
</html>
idea is that i have a link, while i click on that link i need to populate the model.its working,now if i click on the 'yes' button on that modal ,i need an alert, but problem is that alert is not showing when i click on yes button for first time ,but if i again click on that button for second time it is showing,another problem is tht if i clicked on third time alert is showing twise,i dont know the exact reason,i suspect this is because of the on event of jquery.
can any one help me to slove this issue
I believe the issue may stem from your click event bindings being nested. Try removing the outer binding and just register the click event in this way:
$(document).ready(function() {
$("#btnYes").on("click",function(e) {
var $myMod = $(this).closest(".modal"); // Select on closest parent modal
// Now run your required code
});
});
});
Hope this works and helps! Good luck.

Bootstrap Modal blocks select element

When the Modal appears there is a select list that is anchored to the top left of the page. Eventually that list will be used to provide navigation options; however I am unable to select an option in the list. I have tried to set the z-index higher than the modal but nothing seems to work. Hope someone can shed some light on a solution? Thanks!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tool</title>
<!-- Bootstrap v2.3.2 -->
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<button type="button" class="onl btn btn-success btn_online">Submit</button>
<!-- popup message -->
<div id="popup_message" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="_c1g">Description</h3>
</div>
<div class="well msg" id="msg" style="max-height:400px;overflow:auto;"></div>
<div class="modal-footer">
<button class="btn _c1e" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
<script src="script/jquery-1.8.3.js" type="text/javascript"></script>
<!--Bootstrap v3.0.0-->
<script src="script/bootstrap.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$(document).on('click', '.btn_online', function (e) {
$('#popup_message').modal('show');
$("body").append("<select id='my_redirect' style='top:20px;left:20px;z-index:1051;position:absolute;'><option value='' >Select...</option><option value='Page1' >Page1</option><option value='Page2' >Page2</option></select>")
});
});
</script>
To resolve the issue of a modal blocking all elements beneath it when closed you can also add the following block:
<style>
/*Modal blocking caused issues with selecting objects*/
.modal { display:none; }
</style>
Twitter bootstrap multiple modal error
My assumptions were correct. The modal enforces focus on itself. The above has the solution created by #SmartLove. Basically place the following after the bootstrap scripts..
$.fn.modal.Constructor.prototype.enforceFocus = function () {};
Now the select element works as expected! Woo Hoo!

Categories