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.
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 have read this SO Thread and applied the code to my pages and it works well.
However, I have the page help details displayed in a bootstrap modal. When the user clicks on the page help icon, the bootstrap modal opens and displays the help details. I have a "top" button on the bootstrap modal help so that the user can scroll to the top of the bootstrap modal help "page".
The issue I have is that the scroll up to the top of the bootstrap modal help "page" does not occur. Instead, the actual page that the bootstrap modal was initiated from scrolls up.
How do I amend my code so that the scrolling effect will occur on the bootstrap modal?
Here is my js code:
function goToByScrollHelp(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
Here is my html code link:
<a id="id_top_of_help"></a>
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 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.
I'm using a bootstrap modal, it launches as soon as the page is loaded. It works fine in every browser except Safari. The modal will display for as long as a the fade animation then the modal box will disappear leaving only the backdrop and preventing the site from being used.
I've verified bootstrap is only being loaded once.
using bootstrap 3.1.1
For the sake of completion there was another widget on the page that was conflicting with the bootstrap modal only on Safari.