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.
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 open another modal from a modal by clicking a link inside the first modal (and I also need from te second modal to go back to the first one):
<a onclick="$('.modal-1').modal('hide');$('.modal-2').modal('show');"></a>
And then in the second modal I can go back to the first via another link:
<a onclick="$('.modal-2').modal('hide');$('.modal-1').modal('show');"></a>
But doing it this way makes the '.modal-backdrop' flashing, since in the first case the backdrop of the first modal is fading out whilst the second one is fading in.
Could you help me find a way to prevent the backdrop flashing?
Thank you in advance
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
I am working on a web app that opens a Bootstrap modal displaying user contacts by clicking an icon. The data in this modal is created from an AJAX call. The dynamic data contains an anchor tag that should open a second modal when clicked that will allow the user to edit the contact information. The tag in the first modal looks like this:
Edit</div><div class="clearfix"></div></div>';
The page contains a dialog modal with id="edit-contact"
Clicking on this link does nothing when it is dynamically generated, but if it is hardcoded in the page, the second modal opens as expected. Also, events such as click don't work on the dynamically generated content.
From the same page, I am able to open a modal from AJAX data, but the link to open the modal is on the page on not on another modal, so it looks like the Bootstrap modal has an issue with dynamic content - has anyone run into this issue? -Thanks!
You need to call the opening of the modal in your ajax success :
$.ajax("myUrl").success(function(data)
{
$('#edit-contact').append(data).modal('show');
});
<div id="edit-contact" class="modal fade" role="dialog" aria-labelledby="modalTitle" aria-hidden="true"></div>
I think you should use delegate or other tools like on. I perfer delegate. You have to give that element a second command so that it is clickable. Like:
$(selector).delegate(this,"click",function(){
//Do something as you wish
});
See this delegate link for more documentation.
I need to show a page of contents inside my page.
ie; when i click on a link it will show 2 paragraphs inside a div as popup in the same page.
that popup must have a close button in it to close that div popup.
Is any one have an idea or code to help me in this
Thanks.
You could use something like a jQuery modal dialogue box:
Thickbox - apparently no longer maintained.
jQuery UI, recommended by those behind Thickbox.
jqModal
BlockUI
Facebox, which looks much as you'd expect, from the name...
Use hide properties for your div tag.
For hiding
document.getElementById('divid').style.display='none';
For displaying
document.getElementById('divid').style.display='block';