When I open modal in Angular-UI Bootstrap, press the 'tab' key to cycle through elements, once cycling through elements in the modal window it starts selecting elements behind the modal.
To demonstrate goto: http://angular-ui.github.io/bootstrap/ and scroll to the modal section.
Angular-UI bootstrap is built up from Twitter Bootstrap. Though Twitter Bootstrap does not have this same issue. I have tested in 3.1.1 & 3.2
To demonstrate desired behaviour:
- 3.2: http://getbootstrap.com/javascript/#modals
- 3.1.1: http://bootstrapdocs.com/v3.1.1/docs/javascript/#modals
How does Bootstrap prevent selecting elements behind the Modal window on tab?
My guess is that this PR for angular-ui will fix your problem. It looks like the PR is stuck because the commits need to be squashed. This might be something that you could do if you want to push this forward and get the fix in.
Related
I have a problem. I made a custom Pop-up using elementor and now added a custom jQuery code for the pop-up menu to close on the menu-item click. I have ordered the Elementor to open via action in elementor and close via the code. Picture of elementor action for popup
The code is following.
<script>
jQuery(function($){
$(document).on('click','.elementor-location-popup .menu-item', function(event){
elementorProFrontend.modules.popup.closePopup({}, event );
});
});
</script>
The problem is, that every click on different elements on the page, for example the admin bar, the contact form etc, the popup opens, event though not ordered to do so.
Has anyone had the same issue with elementor popup?
Has it something to do with the jQuery document value? Or should I seek help from elementor?
Got the fix. It is an Elementor bug.. They still have not fixed it, even with the latest update. The issue was not with jQuery code, but with Elementor settings.
I had to eliminate all the popup conditions and triggers from elementor side and just use a dynamic elementor button opening and jQuery button closing.
Somehow the triggers produced the bug, that opened the popup on a random page click.
I'm building a portfolio webpage and have incorporated W3School's Bootstrap Lightbox.
What I am trying to do now is make when you click outside the image, the modal closes; similar to other lightboxes. I also want to add in navigation by using the arrow keys and escape key.
I have searched Stack Overflow and have found questions similar to what I am asking but I do not understand how to add jquery to do what I want. Other lightbox modals work fine when you click outside the box to close it, but why not here? Thank you in advance.
From Bootstrap's page:
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
What do I put in the // do something..?
I have a popup that fits to the width of a browser. However, I would like the user to be able to resize and/or reposition the popup modal.
We are using a modal similar to the pattern described in the Angular documentation: http://angular-ui.github.io/bootstrap/#/modal
Is there an example of an angular popup modal that can be dragged/resized?
Could someone post a jfiddle example?
I build a portlet in Liferay with many bootstrap modal. But my problem is I can not click on datetimepicker or some button. I found the reason is "modals cover picker although it is hidden". I get over it by show all modal then hide them==> picker work well.
But at start time when I load my page, modal show in a short time=>new problem.
I used to hide modal without show them but it not work. Can you show me how to get over it.
When I initialize and show bootstrap modal dialog, all elements on the page behind the dialog and expose mask are still reachable by tab navigation.
Here on official Bootstrap page that is not the case. There is no any specific code for this, just simple modal show.
Any ideas how to disable tabbing behind the modal?
Consider migrating to Bootstrap 3, where this is not an issue.