My problem is In my Main source page when i open one modal from that i will open another modal when i will click outside second modal then it would redirect me to main source page not in parent modal which is default behaviour
I think you should check the state of the second modal on the handling close of the first modal.
but if you share your code, we can better find the reason of this bug.
Related
I am trying to perform the following
Call a modal on a button click from say page 1.
Show the data passed from page 1 as content in the modal.
Come back to the page 1 on clicking the close button on the modal.
I wish to use a react modal to serve this purpose.
You can look any react model library
https://www.npmjs.com/package/react-modal
it has the example also, please check it
I have made a navbar, which holds a searchbar, and 3 icons.
On clicking these icons, a modal is rendered.
I wanted help with two things.
Closing the modals on outside clicks!, and
The hover element is slow because it has three states, every time it is called it re-renders the code from bottom to top. I wanted the hover to have one state assigned to one parent element. But on doing that, the hover effect for all three buttons gets activated at the same time.
Code is up on : https://codesandbox.io/s/unruffled-snowflake-he95w
Please feel free to edit the code and pass me the edited fork.
I have tried handleBlur, passing an event, and eventListener.
https://codesandbox.io/s/unruffled-snowflake-he95w
Expected - Modal rendered on screen should get disappeared on clicking outside the modal.
P.S - semantic UI icons are not rendering, but they are there. They will activate if you hover over them.
Credits - SVG close icon problem solved by Drew Reese.
Ah, I see. Your ToolBar is the controlling component, i.e. the state about whether or not each toolbar item is open is stored there. You need to pass a close handler to the children components so when a "close" button is clicked it is calling the callback the parent passed in.
Here is a fork of your sandbox where I pass in an onCloseClick callback to the calendar/picker thing that simply toggles that state value back to false to close it. The picker then just assigns that callback as its onClick handler for the contaning for the close button.
You can apply the same logic to the other two components.
Note: since the icons aren't rendering for me either I added some text to the buttons so they are easier to find/see.
I am using React Modal Plugin to display the modals. I am trying to achieve to below scenario.
On button click a modal will open, inside the modal, i have another button, on click of this button, need to open another modal. but the first opened modal, should stay in the back. I didn't see any documentation regarding this.
That is already supported. Just nest the modal components. That is, inside the rendered content of the first modal, render another modal component. When you click the opening element of the second modal, it will appear in front of the first, while the first stays open in the background.
User can update value for multiple rows in an nggrid using a modal window. After user confirms update and closes modal window, grid does not refresh. Navigating away from page and coming back indicates that the update took effect, but I want this to take effect right away, without having to use location.reload(). Any ideas?
If your modal is a directive I'm guessing (without having seen the code) that you need a $scope.$apply in the directive...
I am using angularjs-ui/bootstrap, want to only one modal window opening , and close other modal before open it. By call "$('.modal').modal('hide')" only works for regular bootstarp modal, but not sure how to made it by angularjs-ui, it looks hard to call dismiss method in other modal's.
And I need keep modal window do not keep status when showing each time, in other words, all controls lost value after hide. So "$('.modal').hide()" also do not works for me.
I create a issue on github, https://github.com/angular-ui/bootstrap/issues/1173, but I do not understand how to wrap a modal into a service.
You could create a service that keeps track of all the modals that are currently opened. In this service you could keep a reference to any opened modal and close/dismiss it when a call to a new open comes in, perhaps using the $close method.