Normally when you open modal, the mask, i.e. the black background behind the modal spans entire screen.
How can I achieve if I want to render the black dialog in some div, as in below image? (the red div say)
I am using antd modal.
Normally the modal is mounted to the body of the document. (This is the <body\> tag.) It is however possible to change this behaviour by using the getContainer attribute. See documentation.
The next problem would be that the modal (and the mask -- or 'black background') have the position 'fixed', which means that it is fixed to the browser window. We need to change this to position 'absolute' instead, so that it would be relative to the div we want to mount it to.
See working example:
https://codesandbox.io/s/c9e5af93-09f2-421d-a8c1-3bbfeb1416fe-olcqd
This is not possible with antd.
Ant Design mounts modals to a separate part of the DOM, outside React's primary DOM tree, similar to React Portal. This is the standard way of handling modals, lightboxes, etc.
See here
You must implement your own overlay that is absolutely constrained to its parent container.
Related
I have a list of items that appears inside a modal on my page. I want to be able to access extra options (i.e. delete, rename) on each element by swiping the list element to the left to reveal the options underneath.
I have created a working simple swiping animation using javascript and the css translate attribute, but the element goes off the edge of the modal when I swipe it, which I don't think looks good. I want it to stay inside the modal and go under the edge whenever it is swiped to the left.
Here is a diagram of what I want:
My first thought was to add a colored box just outside the edge of the modal, but that would obviously show a big square beside the modal. Perhaps there is a way to "chop off" part of an element somehow. How would I do this?
I can't really understand what you want, like I have no idea what those green boxes are for. But to my understanding, it seems like you just need so that the swiped element don't go outside the modal right? if so, you just need to add overflow: hidden to the modal/container class. That way, anything that goes off will be hidden. If you still want the modal to have a vertical scroll capabilities, then use overflow-x: hidden
I have created a custom element named memory-game and I am able to create lots of them by clicking on the icon of the memory game. I want functionality so that when I click on a memory-game window, it appears on top of the other opened windows. I can't figure out how to do that.
Use z-index to control what order non-statically positioned divs appear on the page.
Aside from that, I'm not sure what you're trying to accomplish with the code you have provided.
I am currently using the Intersoft Webgrid 9 for a bunch of our pages. Some of the columns use the built in Calendar popup to edit the date.
The calendar is suppose to popup just under the textbox for editing. In Chrome, this works fine but in IE the popup shows up quite a bit above the textbox.
The calendar popup is a div that is added to the page when the calendar image is first clicked. After the initial click, the div remains on the page but either the visibility changes to hidden when no longer being used or the position changes based on the textbox being edited.
Since we are using Intersoft's resources, I do not have direct access to the javascript for the image click event. I have however been able to add an additional click event to the calendar image but it fires before the div is drawn. After that since the div is now on the page, I am able to adjust the top of the div with jquery through this click event.
So I guess if anyone knows of a way to adjust the calendar control through Intersoft's built in javascript that would be great. Otherwise, I guess I was wondering if there was a way to adjust the top of the div after it has initially been added to the page.
I have attached two images.
Incorrectly displayed
Correctly displayed in Chrome
Thank you so much in advance for any help!
Is the text input element which the calendar is appended to relative or absolute positioned? If the calendar is being positioned absolutely then its parent needs to have relative positioning in order to work as expected. If you append an child with absolute positioning to an element with absolute positioning then they will both use the closest parent with relative positioning to calculate where they should be rendered.
I am using animatedModal.js to get some simple dialog boxes.
Everything is working like a charm, but I can't click the link on my logo on the top of my page, because the modal with
opacity:0;
z-index:-9999;
is in front of it. It's behind all the other stuff and opacity is 0, like it should, but somehow it's still in front of the logo. The logo got z-index:100, but still the invisible modal is in front of it.
Because I couldn't find an online version of animatedModal.js (like cdnjs.com or smth), I can't make a fiddle, but you can check out my webpage here:
The full site
and the animatedModal.js on my site
The problem is quite simple. You are losing the track of the z-index. I don't have all the spot where you set your z-index but I found this two to be crucial:
Your a tag (class=logo) has z-index of 100
Your div tag (class=content) has z-index of 200
So the browser will understand that you always want you content to be above your a tag. So, keep this in mind, let's see how you set up your z-index for modal.
Your modal has z-index of -9999, which is relative to its parent (content) => which means it actually has z-index of 200.(-9999).
This means no matter what z-index you have on the logo, it will always below your modal:
TL;DR:
The fix is set the content z-index to be lower than your a tag. Or reorganize your DOM since modal doesn't need to be next to the call link. If you choose second one, set a tag z-index might kick in.
Using the jQuery popbox library (http://gristmill.github.io/jquery-popbox/index.html) I encountered the following problem:
I have a huge div which has it's overflow set to auto. It is actually a tournament grid displaying a lot of matches to be played. Each match (separate divs) has a small info icon and upon clicking, I'm using the Popbox to display additional information in the window that comes up.
This is all working correctly, however, whenever I press the info icon on a div that's close to the bottom side or the left side of the parent div which has it's overflow set to auto, part of the popbox window is not visible as it ends up outside of the parent div. I'm looking for a user-friendly way to solve this issues.
Setting the parent's div overflow to visible is not an option as I need the scroll bars to appear if it gets too large. It would be nice though if I could make the Popbox window go outside of the parent div and be completely visible.
The other idea that I can think of right now is to set special classes to the info icons close to the edges and adjust the popbox window to the right/top so it is visible in the parent div regardless of its overflow.
I suggest you to use some special classes and make the popover "pop" on top/right.
You can see an example here: http://getbootstrap.com/javascript/#popovers
If you want to use Bootstrap you can make a custom build here: http://getbootstrap.com/customize/?id=6493526
Popover css+js is only additional ~ 10k min+gzip