How to display modal without backdrop effect with react-modal? - javascript

I am using react-modal for both modals and notifications.
I would like to disable the overlay/backdrop effect on the modal. I went through the API and I can't see anything about it.
Here is a basic modal I set up.
https://codesandbox.io/s/upbeat-ptolemy-g0pyb?file=/src/App.js
Any suggestions on how only display the modal without the backdrop? Note that I want to be able to close the modal if click outside of it.

You need to add overlay option to customStyles with alpha has 0.
Something like this
const customStyles = {
overlay: {
backgroundColor: "rgba(0, 0, 0, 0)"
},
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)"
}
};

As you can see from the image, i've removed background color property to remove overlay
styles.css
.ReactModalPortal .ReactModal__Overlay.ReactModal__Overlay--after-open {
background-color: unset !important;
}

I am hoping you can prevent this by adding some css
.modal-backdrop.show {
opacity: 0 !important;
}

Related

How can I fix tooltip with overflow-x and overflow-y?

I did horizontal scroll and also I added tooltip, but tooltip is not working. I am using react-lightweight-tooltip library. I trying with with z-index but it is not working also, I don't know why. Can anybody help me with that. Thank you !
Playground: https://codesandbox.io/s/cool-mendeleev-jb1be
Your custom styles are hiding the tooltip, specifically the bottom: 100% on tooltip.
Remove that or adjust it so that the tooltip shows.
I tested this by using bottom: 0, and that seems to fix it.
Here:
export const underlyingsTooltipStyle = {
/* OMITTED IRRELEVANT STYLES */
tooltip: {
position: 'absolute',
zIndex: '99',
background: '#000',
bottom: '0',
left: '50%',
marginBottom: '10px',
padding: '5px',
WebkitTransform: 'translateX(-50%)',
msTransform: 'translateX(-50%)',
OTransform: 'translateX(-50%)',
transform: 'translateX(-50%)',
},
/* OMITTED IRRELEVANT STYLES */
]

JQuery position in the middle of current screen

I am using Jquery dialog like this:
<body>
<div id="comments_dialog">
Insert a comment
<form>
<input type="text" id="search" name="q">
</form>
</div>
....
</body>
dialog = $( "#comment_dialog" ).dialog({
autoOpen: false,
height: 400,
width: 350,
dialogClass: "flora",
modal: true,
buttons: {
"New Comment": addComment,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});
My page is a scrollable page with a lot of data.
The issue is that the dialog is being displayed in the middle of the page, and I would like it to be displayed in the middle of the CURRENT screen, so the user wouldn't need to scroll to see it.
How can I do it?
EDITED
Based on a few solutions here, I set the CSS to be fixed like this:
.flora.ui-front {
z-index: 1000 !important;
position:fixed !important;
}
.flora.ui-dialog {
z-index: 1001 !important;
position:fixed !important;
}
However, I read that position fixed conflicts with zIndex.
What can I do in this case that I need the dialog to put ontop and in the middle of current screen?
You might be using position:absolute; in your css, try changing it to position:fixed;
#comment_dialog{
position:fixed;
}
What i always use for my modals / dialogs:
#comment_dialog{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
As long as your div has a size (doesn't need to be a fixed size) it will display it in the middle of the window (centered horizontally and vertically)
To apply these styles dynamically to your element with Jquery, use this:
$("#comment_dialog").css({
"position" : "fixed",
"top": "0",
"left": "0",
"right": "0",
"bottom": "0"
});
do a position fixed, and use calc function for top and left
#comment_dialog {
position:fixed;
left: calc(50% - 200px) !important;
top: calc(50% - 175px) !important;
}
i think that's help for you
try this
dialog = $( "#comment_dialog" ).dialog({
autoOpen: false,
height: 400,
width: 350,
my: "center",
at: "center",
of: window,
z-index : 9999,
modal: true,
buttons: {
"New Comment": addComment,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});
You can use the following CSS.
Please run the example in "Full Screen" and resize browser window to see the effect.
Explanation:
Use position:fixed for your dialog, this means dialog element is positioned relative to the browser window.
Set position top and left using calc which enable to perform calculations to determine CSS property values.
Value for top is calculated as: 50% of the actual viewport height minus half dialog height, so dialog will be always placed in the center of the view port height.
Value for left is calculated as: 50% of the actual viewport width minus half dialog width, so dialog will be always placed in the center of the view port width.
Result is the dialog always placed at the center of the viewport.
#comments_dialog {
position:fixed;
top: calc(50vh - 250px/2);
left: calc(50vw - 350px/2);
height: 250px;
width: 350px;
background-color:yellow;
z-index: 1000;
}
<div id="comments_dialog">
Your content here.
</div>
You can have the same result using jQuery in this way, it will add inline style to your dialog:
$("#comments_dialog").css({
"position": "fixed",
"top": "calc(50vh - 250px/2)",
"left": "calc(50vw - 350px/2)",
"width": "350px",
"height": "250px",
"background-color": "yellow",
"z-index": "1000";
});

Animate Element to right edge of the window using Jquery?

I am trying to animate a div to the right of the window using Jquery. I am also using Jquery UI to change the color of the div. I am animating the div all over the window as well. I am just experimenting with jquery animations though, nothing critical. Any ways this is the code I have so far:
HTML:
<div id="box1"></div>
<button type="button" id="btn"> Click Me! </button>
CSS:
#box1{
width: 200px;
height: 200px;
background-color: red;
border: 0px solid black;
border-radius: 0px;
position: relative;
}
#btn{
position: fixed;
top: 600px;
display: table-cell;
font-size: 30px;
}
JQuery:
var allow = true;
var animating = false;
$("#btn").click(function(){
if(allow == true){
if(!animating){
animating = true;
$("#btn").hide();
$("#box1").animate({backgroundColor: "yellow", borderWidth: "5px"}, 1000, "linear").animate({left: "500px"}, 1000).animate({top: "500px"}, 1000);
$("#box1").animate({left: "1000px", top: "0px"}, 1000).animate({left: "500px"}, 1000).animate({top: "500px"}, 1000, function(){
allow = false;
animating = false;
$("#btn").show().text("Click Me Aagain!");
});
}
} else {
if(!animating){
$("#btn").hide();
animating = true;
$("#box1").animate({top: 0}, 1000).animate({left: 0}, 1500).animate({backgroundColor: "red", borderRadius: 0, borderWidth: 0, width: "100px", height: "100px"}, 1000, function(){
$("#btn").show().text("Start Over!");
});
animating = false;
allow = true;
}
}
});
The first variable at the top is to toggle between two different animation sequences. The next is to ensure that the animations are not triggered twice by mistake. The element I am trying to move all the way to the right is #box1 and I want it to do so at the end of the first sequence!
Thanks for your help!
There are 2 options you can do to get the box to animate to the right edge of the area.
1) You could set the css "left: auto", and animate the css "right:0". To do this you would need to take some extra steps. You would need to set css "position: absolute" to the box and would need to wrap the box in a div that has the css "position: relative" with a width of 100%. That way, the box knows where the right edge because its most immediate parent that has css "position:relative" is setting the boundary. Doing this option would require a little fine tuning because switching between animating the left position and the right position will cause some jumping.
2) This option you could continue animating the left position, but to get it to animate to the right, you would need jquery to calculate how wide the page is, and subtract the with width of the box. It would look like this:
left: ($(document).outerWidth() - $('#box1').outerWidth())

toast notification over 'overlay'

I know it's not what toastr (or toast notifs in general) are meant to be used for, but I want to use them as a modal notification. My idea is following.
On toast show:
toastr.options.onShown = function() { //Create an overlay on the entire page}
Overlay:
#overlay {
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
And on toast close:
toastr.options.onHidden = function() { //make overlay go away }
Also, I'm setting timeout of toast to 0 so it won't disappear by itself.
Question: I want the toast notification to stay atop the overlay and not behind it as overlay will cover everything. How can I do it?
You are doing it right..
Just add
<div id="overlay"></div> in body somewhere. Add your required style in stylesheet.
In toastr.options.onShown callback, add show overlay $("#overlay").show(); and in toastr.options.onHidden callback hide it.. $("#overlay").hide();
Toaster has id toast-container which has z-index 999999. So in order to move overlay below toastr, set z-index below 999999.. Which is the default case in your stylesheet..
You should be good to go :-)

How to replicate the Angry Birds MouseOver on play button effect

Most of you must have played the game Angry Birds . In it , on the start screen , we are shown the play button . On hovering over it , the button increases in size. I tried to replicate something similar and came up with this(Launch in new window). Now , my question is , which CSS-effect should I use to make it happen , since the effect I use is really bad.
My Javascript Code:
$(document).ready(function () {
$("#play_button").hover(
function () {
$('#play_button').css({ "height": "240px", "width": "250px" });
},
function () {
$('#play_button').css({ "height": "225px", "width": "220px" });
}
);
});
Thanks.
I don't know what the Angry Birds play button looks like, but you can make a button "grow" on hover using the hover pseudo class and transition
FIDDLE: http://jsfiddle.net/wuJD9/
#play {
width: 220px;
height: 225px;
background: tomato;
transition: .5s ease;
}
#play:hover {
width: 250px;
height: 240px;
}
for css
#play_button { height:225px; width:220px;}
for hover
#play_button:hover { height:225px; width:220px;}

Categories