Bootstrap: modal.js v3.2.0 Nested modal popup - javascript

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

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

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

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

Re-usable custom directive for modal window in angularjs

I have four menu bar tabs in my application. Each tab has settings icon where user can click on it and a modal window opens and user can perform delete/save/cancel operations on that Tab. For this, I want to create a re-usable modal window. This window will have unique information about each menu Tab. Can somebody help to create a custom directive-modal window when the user clicks on settings icon.
Thanks
If you are open to using bootstrap, I recommend using ui.bootstrap.modal from the bootstrap angular directives for all your modal popup needs.
It's an easy way to handle everything related with modal windows. The actual content of the modal window may be in a separate template, or displayed using a custom directive which can be passed with the options to $modal.open().

Twitter Bootstrap Modal within Modal?

Is it possible to open a modal within another modal with twitter bootstrap?
I created a modal and put a link to a second modal and the definition for a second modal within the first modal body. When I clicked the link the second modal opened on top of the first modal.
I want the second modal to open as if the first modal was the entire window. How can I do that?
Use the jQuery's method html() to replace innerHtml of your first modal by the text.
Here is a JSFiddle Example where you only change the modal window's body.
Here is another JSFiddle Example where you change all modal's content.

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