I have a meteor app for both web and mobile platforms.
I have a bootstrap modal in it, and I need the modal to be dismissed whenever a user presses the browser's back button (in web app), or device's back button (in mobile app).
Currently, when I press (browser/device) back button, the modal disappears without any animation, the modal's faded backdrop is still displayed, and the user is taken to the previous page.
What I want is that when the modal is open, the modal (along with the backdrop) should dismiss, with animation, and the user should remain on the current page.
Here's my relevant code:
$(window).on('popstate', this.handleBackPress);
document.addEventListener("backbutton", this.handleBackPress, false);
...
handleBackPress(event) {
event.preventDefault();
event.stopPropagation();
$('.modal').modal('hide');
}
Thanks :)
Update
Using the following code in android dismisses the modal correctly, and stays on the same page. But now, it never ever allows the back press event to propagate.
document.addEventListener("backbutton", this.handleBackPress);
...
handleBackPress(event) {
$('.modal').modal('hide');
}
in your function, add $('.modal-backdrop').remove();
handleBackPress(event) {
event.preventDefault();
event.stopPropagation();
$('.modal').modal('hide');
$('.modal-backdrop').remove();
}
As for the fade effect, your modal should have a fade class attached to it: class="modal fade"
Try this :
$('#modalid').modal('toggle');
Your code will be like this:
handleBackPress(event) {
event.preventDefault();
event.stopPropagation();
$('.modal').modal('toggle');
}
Try this out :
$('#backbutton').click(function() {
$('.modal').modal('hide');
});
Related
I have the following code that I found here https://stackoverflow.com/a/60187153/16383273
function handleBackPress(event) {
event.preventDefault();
event.stopPropagation();
$('.modal').modal('hide');
$('.modal-backdrop').remove();
}
var closedModalHashStateId = "#modalClosed";
var openModalHashStateId = "#modalOpen";
window.location.hash = closedModalHashStateId;
$(window).on('popstate', this.handleBackPress);
document.addEventListener("backbutton", this.handleBackPress, false);
$('.modal').on('show.bs.modal', function(e) {
window.history.pushState('forward', null, './'+openModalHashStateId);
});
$('.modal').on('hide.bs.modal', function(e) {
window.history.back();
});
I am using this code to close bootstrap modals using phone's back button. However, I found an issue here. This code closes all the modals open at once. This is irritating from the user's point of view. What I want to do here is that I want to close the bootstrap modals one by one. With the first back button clicked it should close the most recent one. The other modals should still remain active and displayed. On further clicking of back buttons it should keep closing further modals as per their opening sequence or as per which is currently displayed on the screen. How can I do this?
I'm using history and pushState/currentState to:
Change the URL when the modal is fired.
If back button or modal close button is pushed, close the modal and
go back to the previous URL.
If modal is fired, closed, and the forward button is pushed, re-open
the modal and go to the modal URL.
All is working EXCEPT 3. I have this JS in there but it doesn't seem to work:
window.addEventListener('popstate', function (e) {
var state = history.state;
// back button pressed. close popup
if (!state) {
$(".modal").css({ "display": "none" });
$('body').css('position', 'relative');
}
else {
dataModal = $(this).attr("data-modal");
$("#" + dataModal).css({ "display": "flex" });
$('body').css('position', 'fixed');
}
});
And here is a Fiddle.
Any help would be greatly appreciated. Thank you so much.
There are 2 apparent issues in your code:
dataModal = $(this).attr("data-modal");. this in this context refers to the window object because the popstate event is registered on the window. The window doesn't have a data-modal attribute so dataModal === undefined
You're not saving the modal id anywhere when you pushState in the modal trigger event.
Possible solution
Try doing something like history.pushState({dataModal: dataModal}, title, url); in the modal trigger event. Then in the popstate event you can do var dataModal = e.state.dataModal to get the modal id.
I have a modal which is opened by clicking this hyperlink:
<a class="link-efekt" data-hover="izrazi zanimanje" href="#izrazi-zanimanje-univerzalno">izrazi zanimanje</a>
And closed by clicking this one:
zapri
I am trying to reprogram the ESC key to always go back to the main screen back to the main screen or to close modal window.
So my attempt at this was to reprogram ESC key to go to a previous hyperlink using window.history.back(); but then it can go back multiple times and I only want it to be able to go back once - just enough to close modal window. This is why i implemented the if statement which should check if #izrazi-zanimanje-univerzalno is opened. Otherwise ESC key shouldn't do anything.
I also tried using $('#izrazi-zanimanje-univerzalno').hide(); instead of window.history.back() (without if sentence) but it totally ignores my CSS transition effects and once modal is hidden it can't be respawned by clicking on a hyperlink that usually opens it.
<script type="text/javascript">
$(document).keyup(function(e) {
if (e.keyCode == 27) {
if ( $("#izrazi-zanimanje-univerzalno").data('modal').isShown ) {
window.history.back();
}
}
});
</script>
After implementing the first suggested solution by #crazymatt I get this console output on keypress:
Since you are using JQuery couldn't you run a fade animation then close the window? Something like this:
$( "#clickme" ).click(function() {
$( "#book" ).fadeTo( "slow" , 0, function() {
// Animation complete now close overlay
});
});
I made a JS.Fiddle with my example but I didn't take the time to apply this to an overlay.
Building a mobile menu and would like when the user clicks on the document, not the menu to close the menu if its open.
Problem is that when the first click is fired to open the mobile it automatically closes. I'm struggling to get this bit to work.
The code recognises the click so the window is detecting the right action. I'm just missing one final step I think.
Code is:
$('.mobile-menu-button').click(function(e) {
e.preventDefault();
$('.mobile-menu').slideToggle('slow');
});
// close on off click
$(window).click(function(e){
e.preventDefault();
e.stopPropagation();
if($('.mobile-menu').css("display") == 'block') {
$('.mobile-menu').slideToggle();
console.log('click');
}
});
Thanks
You can use event delegation. When you click on '.mobile-menu', you open it or close it, when you click somewhere else you only close it.
$(window).on('click', function(e){
e.preventDefault();
if ($(e.target).hasClass('mobile-menu-button')) {
$('.mobile-menu').slideToggle('slow');
} else {
$('.mobile-menu').css('display') === 'block' && $('.mobile-menu').slideUp();
}
});
a basic example on this fiddle: https://jsfiddle.net/6e7atrmn/2/
I have a sliding JS menu that opens when you click the noty_menu link, then closes when you click that link again. Is there a way to set it so that the menu closes when you click ANYWHERE on the page?
Here's the relevant code:
$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
});
You could catch a click on the body:
$('body').click(function() {
/* close menu */
});
But then in your menu click you have to prevent propagation of the click up to body. Otherwise the menu will open, the click will propagate up, and the menu will immediately close. return false; should suffice here:
$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
return false;
});
(You could also read in the event argument to the handler function like function(ev) { ... } and call ev.stopPropagation()).
You may also want to prevent clicks inside the menu from closing it:
$('ul.the_menu').click(function () {
return false;
});
Note that this solution comes with a caveat that any other click event that stops propagation will also prevent the menu close.
u can use
$('body').click(function(){
//ur code
});
to do this
You can check the entire document, however that includes clicks on the menu (if you have any spacing, this could annoy the user) by something like this:
var menu=$('ul.the_menu');
$(document).on('click',function(){
if(menu.height>0) {
menu.slideToggle('medium');
}
});