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.
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 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');
});
I am using a jquery plugin called mmenu to load a side menu when a button has been clicked.
That works fine, but Im also trying to get a hamburger style image going at the same time. I start off with the three lines and then when the menu button pressed it changes into a cross, this seems to work.
my issue comes when trying to close the menu, I want it to return back to a cross. The mmenu allows you to click anywhere to close the menu but I cant get the jquery right to change it back.
I added a class when the button (.menuvate) is clicked, called "active" which displays the cross but no matter how I try I cant get it to check that the class is active when anywhere on the page is clicked after the menu has been opened.
This is my code so far
$('.menuvate').click(function(){
$("#my-menu").trigger("open.mm");
$("#mm-0").addClass("menu-opened");
$("#nav-toggle").addClass("active");
});
$(document).click(function() {
alert("me");
});
I just put an alert in to tell me when this is being fired which of course it does everytime the page is clicked.
How do I get it to check for the active class after the menu has been opened when the page is clicked again so I can remove the class and change it back?
Thank you.
You will want to listen on the custom events to know if the menu is closing or closed.
Basically, what you want is:
$("#my-menu")
.on( "closing.mm", function() {
alert( "The menu has started closing." );
})
.on( "closed.mm", function() {
alert( "The menu has been closed." );
});
Read more on the ones fired by mmenu at http://mmenu.frebsite.nl/documentation/custom-events.html
You can use the jQuery hasClass attribute.
$("#mm-0").hasClass("menu-opened");
When a user opens dialog, there are a bunch of ajax requests that have to be processed and therefore i have a second dialog that just displays loading information and closes once all the requests have been processed.
I am not able to close the user opened dialog with Escape key once it has opened. I have to click on the the dialog itself before I can use escape.
I have tried the following to assign the user opened dialog the focus after the loading dialog closes but to no avail, I still have to click on the dialog before it can close with the escape key.
$(document).ajaxStart(function () {
// IF loading dialog is not allready being shown show it.
if ($("#LoadingData").dialog('isOpen') === false) {
$("#LoadingData").dialog('open');
}
});
$(document).ajaxStop(function () {
//Close the loading dialog once the requests have finished
$("#LoadingData").dialog('close');
//Find the user opened dialog
$('.cmdialog').each(function () {
if ($(this).dialog('isOpen')) {
$(this).trigger('click');//set focus to dialog
// have also replaced .trigger('click') with .focus() but to no avail
}
}).on('click', function() {
//if click is triggerd set the focus of the dialog.
if ($(this).prop('id') != 'LoadingData') {
$(this).focus();
}
});
});
I have also tried setting the focus to the first element within the dialog with $('#DialogName:first-child').focus() and $('#DialogName:first-child').trigger('click') but this is also not working.
Any ideas as to why the focus is not set? Or am I misunderstanding/incorrectly using .focus() and .trigger('event')?
Thanks :)
Try the below code for close the dialog when Escap key is pressed:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $("#LoadingData").dialog('close'); } // esc
});
I had the same issue, and found pretty elegant solution, in case you want to close dialog before actually clicking inside it:
$("#LoadingData").dialog({
...,
focus: function () {
$('#LoadingData').closest('.ui-dialog').focus();
}
});
So, we just need to set focus to parent .ui-dialog container, and in that case Esc will work for all cases. Disadvantage of $(document).keyup solution, if you have nested dialogs, Esc button will close your most top dialog and bottom one too.
the focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links. docs here
You can try moveToTop method of the dialog, maybe it will help
And in your code, I think, you should bind "click" event before triggering it.
The following code should work even for multiple modals open:
$(document).on('keydown','.modal-dialog',function(event){
if (event.keyCode == 27) {
$(this).closest('.modal-dialog').find('[data-dismiss="modal"]').click();
}
});
I have a popup where i basically just dim the body giving it the lights out effect. I have a click handeler where if the body is clicked it will close the popup but my issue is the click handler stops all clicks even before the popup is opened. Does anyone know how i could do this so that clicking on a link before the popup is opened would go to the link but clicking one after the popup was opened would do my function and not click the link?
Heres what i use right now:
$(document).ready(function() {
$("body").click(function(){
var element=document.getElementById("game");
//yes i could use the jquery method for all of these but this works
element.width="650";
element.height="500";
element.style.position="relative";
$("body").fadeTo(3000,1.0);
}
return false;
})
});
You can actually add your "body" click handeler only after clicking your link/opening the popup. Then after clicking the "body" you may remove it again and restore the click handler for your link. "bind()" and "unbind()" will be handy.
K
Where's the jQuery? When you use jQuery, you use jQuery...
When you click on the body, you can check whether #game is visible or not and work with that:
$(document).ready(function() {
$('body').click(function(e){
if (!$('#game').is(':visible')) {
$('#game').width('650px');
$('#game').height('500px');
$('#game').css('position', 'relative');
$('body').fadeTo(3000, 1.0);
e.preventDefault();
return false;
}
});
});