How can I store a cookie when user closes this alert from bootstrap
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
I know how to do it with "onclick" , but is there another way without modifying the above code?
Use one of the alert events to trigger your code
Event
Description
close.bs.alert
This event fires immediately when the close instance method is called.
closed.bs.alert
This event is fired when the alert has been closed (will wait for CSS transitions to complete).
$(".alert").on("closed.bs.alert", (e) => {
console.log("here's where I would set a cookie")
// doesn't work in StackSnippet sandbox
// document.cookie = "favorite_framework=Bootstrap; SameSite=None; Secure";
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
so are you asking how to attach listeners to dom elements without modifying the elements?
<script>
$('.alert-dismissible button.btn-close').click(() => {
// cookie stuff here.
});
</script>
You can target them, the above is using jquery.
Related
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();
I am making an alert system for a web application with Bootstrap 4. Here is my code:
function bsalert(str1, str2) {
$(".alert").addClass('show');
$(".alert").addClass('alert-'+str1);
$('.alert').html(str2);
setTimeout( function() {
$(".alert").removeClass('show');
$(".alert").removeClass('alert-'+str1);
}, 2000 );
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="alert alert-dismissible fade text-center" role="alert" id="alert"></div>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('danger', 'ALERT!');">one</button>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('success', 'nice');">two</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
The issue I am having is if you do it too quickly, before the timer removes the class, it breaks the ability to change alert types. How can I fix this? Does Bootstrap have a better function built in?
Edit: In this example I simplified the number of types of alerts, in actually there's more than just danger and success.
i hope it help you
var timer;
function bsalert(str1, str2) {
clearTimeout(timer)
$(".alert").removeClass('show');
$(".alert").removeClass('alert-danger');
$(".alert").removeClass('alert-success');
$(".alert").addClass('show');
$(".alert").addClass('alert-'+str1);
$('.alert').html(str2);
timer=setTimeout( function() {
$(".alert").removeClass('show');
$(".alert").removeClass('alert-'+str1);
}, 2000 );
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="alert alert-dismissible fade text-center" role="alert" id="alert"></div>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('danger', 'ALERT!');">one</button>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('success', 'nice');">two</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Now if you use the set time out function the alert will hide in 2 seconds interval so in the meantime if the notification is clicked many times continuously it will still hide the element in 2 seconds which can create an effect where you see it going off very quickly, there are few solutions to which: either you post an element with different id for every notification, or you restrict the function call or delay it after two seconds, or disable the notification button for 2 seconds so the notification is called only after every 2 seconds,also you can use the clear timeout function of javascript.
var timeoutElem;
function bsalert(str1, str2) {
var alertClassString = 'alert-' + str1;
var existingClass = '';
clearTimeout(timeoutElem);
existingClass = (str1 === "danger") ? 'alert-success' : 'alert-danger';
$(".alert").removeClass(existingClass);
$(".alert").addClass(alertClassString);
$(".alert").removeClass('show');
$(".alert").addClass('show');
$('.alert').html(str2);
timeoutElem = setTimeout(function() {
$(".alert").removeClass('show');
}, 2000);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="alert alert-dismissible fade text-center" role="alert" id="alert"></div>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('danger', 'ALERT!');">one</button>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('success', 'nice');">two</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
I would like to display a text description box when I hover over the button and close it when not hovered. At the moment, when my button is hovered the text box displays, however I need to click off the screen to close it. When I try to use several buttons to show different message boxes, all the modals are opened and I need to click the screen many times to close it. How can I show the message box on hover and undisplay when the mouse is not hovered over. How can this be achieve for multiple buttons?
Below is what i have so far:
$(document).ready(function () {
"use strict";
$("#test1").hover(
function () {
$('.modal').modal({
show: true
});
},
function () {
$('.modal').modal('hide');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<button class="btn login btn-primary" data-toggle="modal" data-target="#product1" id="test1">Test</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button
</div>
</div>
</div>
First major problem: when bootstrap displays this modal, it overwrites everything on the web page, including the Test button, which makes it out of reach of a mouseOut (the bottom of the modal dialog is over the button )
This is solved by bidding on the order of the display layers by placing a larger z-index css (I put 8000 and this also works only if the element uses a positioning)
As a result, this is no longer a true modal dialog, and the click on the Test button can be triggered, which is contrary to the spirit of using a modal dialog.
the BS4 doc on the subject => https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes
$(document).ready(function () {
"use strict";
$(".BtModals").hover(
function () {
let refID = '#' + $(this).data('modal_id');
$(refID).modal('show');
},
function () {
let refID = '#' + $(this).data('modal_id');
$(refID).modal('hide');
});
});
.BtModals:hover {
position:relative;
z-index: 8000;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<button class="btn login btn-primary BtModals" data-modal_id="Modal-t1" data-toggle="modal" data-target="#product1" >Test 1</button>
<button class="btn login btn-primary BtModals" data-modal_id="Modal-t2" data-toggle="modal" data-target="#product1" >Test 2</button>
<div id="Modal-t1" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button Test 1
</div>
</div>
</div>
<div id="Modal-t2" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button Test 2
</div>
</div>
</div>
New Answer:
"hover" method accepts second argument as handlerOut.
So you can do something like this:
$(document).ready(function () {
"use strict";
$("#test1").hover(
function () {
$('.modal').modal({
show: true
});
},
function () {
$('.modal').modal('hide');
});
});
Old Answer:
Since you use bootstrap, for such cases, you can use popover.
https://getbootstrap.com/docs/3.3/javascript/#popovers-examples
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
You can achieve it with CSS by setting a data attribute with the 'hover text' in the HTML for each button. If there are too many buttons to do it manually, or if they change dynamically, you can loop over them in JS and use .setAttribute("data-tip", "tip_content").
Here is an example of the HMTL and CSS:
<button data-tip="Show this on hover">My botton</button>
button:hover:after {
content: attr(data-tip);
color: red;
display: block;
position: absolute;
top: 20%;
}
Here is the codepen link if you want to see it live: https://codepen.io/CPC464/pen/KEbJJo
I have problem with hiding modal in bootstrap 4.
In my tmp function I have to close modal after that I need use method update_table(url)
HTML and JS
<div class="modal" id="Modal" tabindex="-1" role="dialog"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script type="text/javascript">
function abrir_modal(url) {
$('#Modal').load(url, function () {
$(this).modal('show');
});
return false;
}
function tmp(url) {
$('#Modal').on('shown.bs.modal', function (e) {
$("#Modal").modal('hide');
})
update_table(url);
}
function update_table(url) {
$.ajax({
type: "GET",
url: url
})
.done(function () {
refresh_table();
});
}
function refresh_table() {
$.ajax({
type: "GET",
url: "{% url 'Project:Task_Schedule_TableView' %}"
})
.done(function (response) {
$("#_appendHere").load("{% url 'Project:Task_Schedule_TableView' %}" + "#_appendHere");
});
};
function hide_modal() {
console.log($('#Modal').modal('name'))
$('#Modal').modal('hide');
console.log(33)
return false;
}
</script>
I don't know what is wrong but when I try use the hide_modal function instead of the tmp function, modal is hidden.
This is simple code for Bootstrap 4 Modal Pop Up which hide the pop up.
You can check this..
$('#Modal').modal('show');
function tmp(url) {
$("#Modal").modal('hide');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="modal" id="Modal">
<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="close" data-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" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When the pop up is shown call this function from browser console.. tmp('http://test/test'); it will hide the pop up. It same as Bootstrap 3
Step 1. Remove these lines from your code
$('#Modal').on('shown.bs.modal', function (e) {
$("#Modal").modal('hide');
})
Step 2. put the hide_modal function top of all code.
Then it will be appeared properly.
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!