Is that possible to create modal within modal? If possible please help me to create modal within modal and within one more modal it means i need to create three modal and second modal should contain drop down using twitter bootstrap.
According to Bootstrap:
Multiple open modals not supported Be sure not to open a modal while
another is still visible. Showing more than one modal at a time
requires custom code.
http://getbootstrap.com/javascript/#modals
Related
I am using react-native-modal library, in my project i want to implement one modal on top of another modal, it is not working on ios but perfectly works on android..
I want to use one modal at a time while other modal is open.
The only way you can have two modals at the same time is by nesting the second modal inside the first modal.For now this is the best solution for the current version of the library.
I am important below Modal in each view that I am using to communicate unique view/page related errors or success messages to users:
<DynamicModal :title="titleModal" :description="descriptionModal" #functionDoSommething="myFunction" #open="open = !open">
</DynamicModal>
However, when I import the Modal in the Header/Navigation component I get a CallStack error as I already imported the Modal in the Parent view.
There is a lot of repetition as you can imagine as I am importing the Modal in each view. plus I am not able to use the Modal in the header/navigation component.
I am binding unique view/page related title and description to the Modal in each view. That’s why I am not able to place the Modal in App.vue
Anyone have a better way to use a dynamic Modal where I can bind title and description based on which view the Modal opens in?
Should I use Vuex?
It's a common thing to open Modal over Modal and so on. Let's say I have opened total four Modals one upon another one. Now I would like to close all four Modals in single call. I have opened Modals in following sequence,
From 1'st Modal to 2'nd Modal => From 2'nd Modal to 3'd Modal => From
3'rd Modal to 4'th Modal
Is it possible to close all four modals from 4'th Modal, at once?
I'm thinking about 2 solutions:
Have different states for each modal and therefore once you want to close them all simultaneously you set each state to false.
Have a separate class component with that Modal, where you have a method called setVisible(value). And where you have all 4 modals, you can set to each one a ref. Therefore when you want to close them all, you just call the setVisible method from each ref
Maybe you can share some code if what I've said seems unclear.
I have created an autocomplete textbox component which basically renders a list of suggestions as the user types. When it is the only component on the screen it works fine but when I try putting it inside a view with another component its view seems to render over the component it is placed alongside. When I put them in separate views the list seems to render under the view below it. I was just wondering if there was a way to render the list above the other views on the screen? Thanks for your help
I suggest you to render a modal on pressing the search view and the modal should contain your textbox for typing and the flatlist below it. The modal will render above all views on your screen. for more help read the documentation.
https://facebook.github.io/react-native/docs/modal
I would like to create a Modal that pops up from the bottom of the screen (similar to Payment Request API) where a user would fill a form and then presses continue, and the modal scrolls to the next step (i.e the modal remains but next step slides in). Is there any plugin that already exists, or has this been done before? (I'm not sure of the limitations of React Native). Just a side note I know how to make a modal popup from the bottom of the screen but not sure how to make the modal slide horizontal in steps.
define a step in your state
this.state={step:'intial'}
and in your render method use step to find out which model to show
<Modal open={true}>
(this.state.step=='intial'?<view></view>:null>
(this.state.step=='second'?<view></view>:null>
</Modal>
you can use animation to make work better