When using the JQueryUI modal dialog, the close button is automatically focused leading the title exposed through the jquery tooltip. I want nothing in the modal to be focused. I have tried to add a click trigger on the title of the modal window, but it seems that it had no effect.
Does anybody have a solution for this?
You can try triggering the blur event on the close button after the modal shows up.
Ex:
$('close-button-selector-here').blur();
Related
Within my ts file i open a boostrap modal using the .open command.
Then upon pressing the save button another modal gets open and the previous one gets closed.
Here the problem is that the first modal recieves focus on itself and the elements inside it BUT second modal doesn't get focus!
Here is what is happening:
I click a button and i open a modal A
In modal A i have some html elements including two buttons to save and close the modal
If i click the save button from modal A this modal will get closed and another modal will open
This second opened modal doesn't get focus when pressing TAB
Here is a stackblitz: StackBlitz Demo
How this stackblitz works:
If you click the first button is going to open the modal A
then clicking save on that modal will open another modal B
Inside modal B if you try to tab is going to tab on the elements in the background WHY?
I want to give my second modal focus. I tried with Directives and other things that angular suggest but i haven't been able to get it to work.
I already checked bootstrap documentation, and there is no focus related thing we can use.
You will need to use the setTimeout function with 0ms to force the openSecondModal to run on a different execution cycle. Basically, we need to add a bit of delay for the first modal to close properly before open the second one.
This is a well-known hack. Hopefully, we can write code without using it one day in the future.
modalRef.componentInstance.closeModal.subscribe(() => {
modalRef.close();
setTimeout(() => {
this.openSecondModal();
}, 0);
});
I am facing a strange problem on iOS devices.
When clicking on buttons/links in an overlaying container, the element below fires also a click event. I have a "filter" button that opens an overlaying div with all the filter options. The closing button on the overlay is located directly over the button, that triggers the overlay. When I click on the close button, the overlay closes, and with a small delay, a click on the filter button is executed again and opens the overlay.
This also happend when I build my mobile menu, where I had a burger button on the top right which opens my mobile menu. The closing button was located where the burger button was. When clicking on the closing button, the click on the burger button is executed again and opens the menu.
I tried to bind a stopImmediatePropagation() to the buttons, but this doesn't work out. This only happens on iOS, Android and Desktop is fine. The functionality of the overlays comes from my used e-commerce system (Shopware 6). It is not only happening with buttons, but with other elements like divs and spans with a functionality to hide/close overlays.
Any ideas how to get rid of this?
Best regards,
Alex
I could solve it with fastclick.js
https://github.com/ftlabs/fastclick
Not what is designed for, but fortunately it solved the click issue on iOS.
I have created one page, in which on right clicking on some button a modal appears.
When I right click on the modal it doesn't seem to work.
So far, what I got to know is, the mouse click is taken by the UI control which comes underneath that modal and listening to all mouse events and that UI control VNC.
I can click on the part of the modal, which is not above that control.
Is there any way I can force modal to take all mouse events when in focus?
What I want to do is just right click and copy the text from that modal.
Thanks in advance,
Regards,
Ganesh
Just called RFB's _rfb.get_keyboard().ungrab() method when modal is shown and was pretty done.
I am new on Bootstrap.
My Requirement is to open Modal Popup in a page. (Done).
Open Modal Popup required to open another Modal Popup. (Done).
Facing Issue :
When I goes to close the nested (Second) Modal Popup, both popup is closed at a time. Because I Use "data-dismiss='modal'" to close the modals. is there any other way to close Nested Modal Popup.
Ah now I understand!
You'll need to close your modal using javascript then :) I've written a little function here. Just add the "closeModal" class to the button which you want to close the modal for.
Basically it finds the parent modal that the button belongs to and closes that modal. Hopefully this helps and you can change it around if needs be.
$(".closeModal").click(function(){
$(this).closest(".modal").modal("hide")
});
http://jsfiddle.net/kjazcz5e/4/
Bootstrap provides a .modal() JQuery plugin to let you control modals. Take a look:
http://getbootstrap.com/javascript/#modals
Any Ideas?
I tried inserting ....({ .....,...., close:false,....}) and nothing.
Thanks in advance.
PS: I will close the modal window when satisfied with $.modal.close();
If you call a modal window as you have indicated {close:false}, the following will happen:
The closeHTML will not be displayed
The user cannot click the overlay to close the dialog
The user cannot press ESC to close the dialog
If you have a button/link in your code with the simplemodal-close class, the user will still be able to press that to close the dialog.
So, based on the information you have provided, if you are using {close:false}, the only other way possible for a user to close the dialog is if you have provided a way for them to. As such, you need to hide, disable, or remove the simplemodal-close class until you are ready for them to close the dialog.