I'm using twitter-bootstrap and am using the Modal JS plugin. I have a modal which is open and want to open another modal from the original modal that is open.
The reasoning, is the user can select an option from the dropdown list. If the item they want to select isn't in the list, they can click a button and add a new one.
I've tried to hide the original modal, then show the new one, but I get stuck with just showing the backdrop. When I try and open them together, the backdrop gets dark (since I've now placed another backdrop on top of the one already existing and I can still see the original modal.
Ideally I could open a modal, then open another just as easy as doing it today with one modal.
My problem was the 2nd modal was inside the file of the first, so when I hid the first, I couldn't show the 2nd one (which is why I was left with just the backdrop). I ended up just calling modal.('hide') on the first modal, then modal('show') on the 2nd.
Related
In react-native app I have a component which show some data. In this component there is modal, that shows on button press with some detailed data. And in this modal I have a button to show another modal with some specific data.
Something like this:
MainComponent->ModalWithSomeColorSettings->ModalWithColorPickerForCurrentElement.
In Android version threre is right order by show on modal by overlap another by default. And if I open one modal, that shows. If in that modal press button to show second modal, that modal shows and overlap previos. If I close last, there is still first one modal on the screen.
But in ios version if I open first modal, then open another, second modal did not show itself. Then if I close first modal, I can see second modal on screen. It's look like order multiple modals in android is different to ios order. First overlap second, instead second overlap first.
Did anyone know is there possible or not to change modals order in ios from react native? Or I need create component to show some specific data instead do it in modals? It's more helpful to stay with modals with my case, because in main component and first modals I have some fetch data from server and don't want to download this data every time when rollback to main component.
I created an autocomplete component and when I use it in modal, the dropdown closes on clicking scrollbar(onBlur event of input gets fired) but when I use the same component outside of modal, scrolling with scrollbar works fine.
I am not able to find the cause of the issue. So please help!!
This is the code-sandbox link
(To reproduce the issue first use scrolling with scrollbar on main page, then open add item modal and use second input field in it which is same autocomplete component).
Is it possible in Bootstrap 3 to open modal from another modal? I have modal windows with content loaded from external html files.
I'm opening the modal window. There I have a form to submit.
After clicking the submit button I would like to go to the next step with a new modal window (and a new content from another html file).
As far as I know you can't have two modal windows simultaneously, so I have to close the first modal and then open the second one. The problem is I have to do after clicking the submit button in the first modal.
I've tried to use the data-dismiss="modal" with data-toggle="modal" attributes on the submit button but they only hide the first modal, the background in still dark and nothing happens.
you can use http://jschr.github.io/bootstrap-modal/bs3.html for that; check stackable example.
This is a minor, subtle point, but in UX, subtlety makes all the difference.
I have crafted a 1-page web app using Twitter bootstrap. In one particularly important part of my application...
My user takes an action,
I present a Confirmation dialog (technically a bootbox confirm)
The user clicks OK to confirm
the modal disappears, an action via ajax takes place,
then I display a secondary modal (bootbox dialog) with a success message.
What I am trying to do is change step 4. I don't want the darkened overlay to disappear, only the dialog box itself. Instead, I would like to leave the background dimmed and display a spinner (spin.js of course) that will be replaced by the success modal upon ajax completion.
In short, I think I may need to override the default behavior of the success method of bootbox confirm.
Is this possible?
It should work if you listen for the close event on the first modal
$(document).on('close', '#firstModalId', function(){
$('#secondModalId').modal('show');
});
You can also try the closed event. If timed right the user shouldn't see both at the same time and they shouldn't see one disappear when the other opens. Be careful of crashing IE when using two bootstrap modals at the same time.
One other possibility I've used is to open the second modal without a backdrop and at the same time changing the z-index of the first modal so it looks like it's gone. When the second modal closes you can either return the first modal to its original z-index or close it like normal. Whether you can take this route depends on whether or not you want the backdrop click behavior in the second modal.
I'm using angular-strp for modal box. My requirement is i want to show the information about the page when page loads in the modal box. When user click ok on the modal box I need to close that modal and show user another modal to choose country.
i'm using ng-click on the first modal ok button to call a function to close the first modal and open another modal in that function.
Is there anyway to chain modal from opening one by closing another in angular-strap?