I need to make a call when the user is idle and passes the session time out that will close all Bootstrap modals. The modals being active are dependent on what the user is doing at the time so I would like to do something that's is all encompassing.
I tried:
$('.modal').modal('toggle');
When the time out occurs but my modals are still there.
Use the following code:
$('.modal').modal('hide');
Also if you would like to do something if the modal is hidden then you can do this:
$('.modal').on('hidden', function () {
// write your code
});
The correct answer is missing something vital.
$('.modal').modal('hide') // closes all active pop ups.
$('.modal-backdrop').remove() // removes the grey overlay.
The second line is vital if you want the users to use the page as normal.
Try this way :
$('.modal.in:visible').modal('hide');
This is how i got it working in my project without using any factory or additional code.
//hide any open bootstrap modals
angular.element('.inmodal').hide();
I have a timeout function that emits logout as $rootScope.$emit('logout'); and the listener in my service is as follows:
$rootScope.$on('logout', function () {
//hide any open bootstrap modals
angular.element('.inmodal').hide();
//do something else here
});
If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();
I don't know if this is the right approach , but it works for me.
Using vanilla JS you can do the following
// import all your dependencies
import * as bootstrap from "bootstrap"
// close all modals but the one you want to open
const $modals = document.querySelectorAll('.modal')
$modals.forEach(modal => {
let currentModal = bootstrap.Modal.getInstance(modal)
if (currentModal) currentModal.hide()
})
When I dont know, wich Modal is open, I use the following for me...
$('.modal[id^="modal_"]').modal('hide');
Related
I have a page created using Zurb Foundation 6. I have a modal set up and working correctly.
I am trying to close the modal when an element is clicked like this..
jQuery('#test').click(function(){
jQuery('#exampleModal').foundation('reveal', 'close');
});
But this is giving me the following error message...
Uncaught ReferenceError: We're sorry, 'reveal' is not an available method for e.
Where am I going wrong?
Looks like you have too many parameters in the foundation() function. Here's the documentation for closing the Reveal modal. Try this:
jQuery('#test').click(function() {
jQuery('#exampleModal').foundation('close');
});
Make sure #test is the ID of the element you're clicking to close, and #exampleModal is the ID of the Reveal modal.
Try
$('#exampleModal').foundation('close');
Scenario: user profile. I would like to be able to display a user name with a popover that displays a limited amount of information from the user profile. So far, I have that part working. I can build it on the fly and have it do what I need. The popover works perfectly.
What I would also like to do is have the user be able to click on the user name and bring up a Bootstrap modal form with more information about the user (if provided). The first problem I am seeing is that it appears the data-toggle attribute can only have a single setting:
echo '' . $user_row['user_name'] . '';
In that example, if I add the modal to the data-toggle attribute it doesn't seem to do me much good.
I have discovered by tinkering (and that is why the class 'userprof' in the code above), that a JavaScript click event can be triggered (right now all I'm doing is a basic JS alert dialog to test), but from there I would want to load the modal. I am not sure if I can make it all work.
I have a set of functions I've used successfully for another modal (calling this one 'userModal') that I got some help from someone here a while back with -- is it possible to call that from the click event?
// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Since these are "anonymous" functions I am not sure I can call them ... feeling a bit lost in the code here. Any help pointing me in the right direction would be great. I'd even be willing to consider a different idea, but I would like this kind of functionality (hover and click) for this situation and possibly something else. Thanks!
You're listening for the modal to show itself, when the DOM is showing the modal.
try using something like this, and use a button or a link with data-toggle="modal"
$(document).on('hidden.bs.modal', '#userModal', function ()
{
$(this).find(".modal-body").text('');
});
for reference https://jsfiddle.net/y063mu4t/1/
You can try:
$(document).on('click', 'a.userprof', function(){
$('#userModal').modal('show');
});
To make your callback function work, you need to add according data-* attribute to each of the <a> tag.
I have a modal that is displayed only once (like a dialog box) after user logged-in firstly. And also I've got a function in that modal file that is supposed to run if modal is displayed.
Here is function:
$('#some_element').(function someFunc() {
console.log("gUM is used now");
//some stuff to do
});
I tried on('click') and it works fine. But I don't need it.
Also, I tried on('load'), but it works before modal is displayed.
Any help will be appreciated. Thanks in advance.
Hello i think you can use events. for example for jquery dialog there is many events and function to know if dialod is open http://api.jqueryui.com/dialog/#method-isOpen and some events like open or beforeClose or you can use jquery to detect if the element is visible $("#SomeElement").is(":visible")
Not an ideal solution but you could start a timer in on load, and have it run a function every half second to check if the modal is visible:
var checkModalTimer;
$(document).ready(function() {
checkModalTimer = setInterval(function() {
if ($('modal').is(':visible')) {
// do your function
clearInterval(checkModalTimer);
}
}, 500);
});
I have a navigation bar with many links. The problem is that I am not done with all the pages. Is there anyway that I can block my users from clicking on certain links and instead display a little message that notifies them that the content will be coming soon?
Edit: It did not allow me to include bootstrap within the tags--but if a solution includes bootstrap, I am comfortable with it.
Edit 2: I have some jQuery effects on the navigation bar, is there anyway to also disable these effects when the link is clicked?
Put a class to your links which are not ready. For i.e. inactive class. And then in jQuery you can simply do it like below:
$( ".inactive" ).click(function(event) {
alert("This page is coming soon!");
event.preventDefault();
});
You can also use alert for displaying message :
HTML
Link
Link Wroking
JS
$('a.inactive').click(function( event ) {
event.preventDefault();
var yesno = alert("Coming Soon");
});
Add class inactive for showing message. For the link which are working, don't add class inactive.
Here is a fiddle.
Simply, you can use href="#" and alert message onclick:
MenuName
I can't seem to open this dropdown menu on page load. Can anyone help?
Documentation on Bootrap 3 is here: http://getbootstrap.com/javascript/#dropdowns
I tried this but it doesn't seem to work
$('#myDropdown').dropdown()
Ultimately, I need to be able to open a drop down that is inside a collapsible menu. For example, I want to open the first down down menu after the user clicks on the menu button. but I can't get it to work.
http://jsfiddle.net/G4k4F/3
Edit: When the navbar is shown, use a timer to wait 1 millisecond before calling .dropdown('toggle'). Like this.
function OpenDropDown() {
$('.dropdown-menu').dropdown('toggle');
};
$('.collapse.navbar-collapse').on('show.bs.collapse', function () {
window.setTimeout(OpenDropDown, 1);
});
try this :
$(function () {
$('.dropdown-menu').dropdown('toggle');
});
Try this..
$(function () {
$('[data-toggle="dropdown"]').dropdown('toggle');
});
Or you can use the button id like:
$('#dLabel').dropdown('toggle');