Ionic Multiple Modal : Major Bug: Modal Stack does not Update - javascript

I have created this bug that has been bothering me for quite some time.
Here -- > Ionic PlayGround
I have 4 modals. ReadMore, Comments, Replies and Images.
To recreate this follow this step:
Open readmore Modal. Inside which there is button to open comment modal. Click On it. Comment Modal opens up. Inside which there is another button for replies modal. Click on it.
Now close all the modals. and return to main page Open Images Modal (3rd Button), Inside which there is a button to open Comments Modal. Click On It--> It dosen't open , it does, but it opens behind the currently opened Modal. <---bug
I have raised an issue on github, but does any one know how to solve this problem?
Using ionic 1.0.0v

Related

Angular open modal doesn't get focused

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);
});

Why my button is not clickable when I dismissed the modal dialog in Ionic app?

I am trying to retrieve the values from an Ionic modal. Anytime I exit the modal and go back to the previous page which is the main page, the button on that page no longer remain clickable.
How do I prevent this from happening?
PS: I have used modals for both alert and data retrieval from pop-ups.
I have tried using following approach:
myModal.onDidDismiss((data)=>{
this.token=data.token;
this.newpin = data.pin;
}};
return await myModal.present();
What I am expecting is I want my modal to work as expected without breaking the buttons on my previous page. Please advise.

How to keep popover opened in safari extension

For a project I'm building an safari extension. One part of the extension contains the popover part.
When someone clicks the extension toolbar button, a popover window scrolls down to display some information.
This is working as expected but now the following:
The plan is to make some sort of companion popover, so when the user clicks inside a webpage, some elements are selected and displayed in the popover.
The problem is the popover closes when one clicks next to the popover window while it should be left open.
Does anybody know a way to keep the popover window open while browsing pages?
There is a function on the window object:
window.onblur
Which fires an event when the popover closes. Is there a way to cancel the closing operation?

Bootstrap: modal.js v3.2.0 Nested modal popup

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

Display 2 modal windows with jQuery

I want to display 2 modal windows containing HTML content with jQuery.
But second modal window must be within the first.
So, here is main page, when I click link it opens first modal window, and then when I click a link in this modal window in opens second modal window.
I tried to do this with qTip, but I can't make second modal window.
I will be appreciate if somebody tells me how can I realize this. Thanks.
To me this sounds like an ui failure - modals within modals are not healthy for a user interface, and thus modal frameworks rarely support it.
If i was you I'd find another design rather than solve this problem programatically
I'd recommend the jQuery UI Modal Dialog, it should allow having two dialogs open at the same time.
qTip allows to open modal in modal.
Something is going wrong with your code.
Post it here and i can give you a solution!

Categories

Resources