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.
Related
I have laravel project with react components.
There is a form on one page and I want to have a modal window displayed with "Save changes Yes/No" message, while user is closing the page.
As soon as I know this can be done in two ways:
By using Prompt from react-router package, but it seems that this won't work for me since I connect react component inside the laravel blade template, thus I don't use react-router.
By using the "beforeunload" event. Modern browsers don't support adjustable messages for the confirmation window and I need to display the adjustable message ("Save changes?").
Does anybody know another way how to track the page closing (or switching to another page) and display a popup window with custom text? Is that possible to display a custom modal window instead of the default confirmation one?
I have two states in ui-router. A main state and a modal state. main state shows a page and is dynamic based on pageCode. modal state opens a dialog using mdDialog and it's content is dynamic too. the content is another page, that can also be opened in main state in situations. when a modal is opened, the content can also link to another page, which needs to open again in a new modal(modal in modal), which I use a global service to handle all modals.
Now the issue is when the second modal opens, since they use the same state and state parameters, the first opened modal content will also change. Is there a way to prevent this or maybe a better design approach?
Plunkr to show the issue: http://next.plnkr.co/edit/4PbnZ778Utdb27PX
When you click the open second dialog button inside the first dialog, see that the test1 in the first dialog changes to test2 right before dialog 2 opens
In my app i have TabBarIOS with 3 different tabs. When you change something or for example scroll page in one tab, then you go to another tab and when you come back, the tab's content is not rerendering. it stays at same place (scrolled).
is there anyway to rerender tab's content (component) everytime you click on tabs?
I found the solution in this article :
http://richardkho.com/persisting-tabbars-in-react-native/
Whenever you click on a tab, it renders a navigationios.
So when user is clicking on each tab, i should check if the tab is already selected or not. if it's already the selected tab, i should do navigate.poptotop ( for the navigation ios that is being called ).
if not, i just call the navigation
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 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.