toast notification over 'overlay' - javascript

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 :-)

Related

How to create a popup component with all background blured/disabled?

I am building a react app.
I want to show a popup window in the center of screen in which user can give review to the product.
While showing that window how to prevent scrolling of background and disable all background such that if user clicks outside of that window(even on a button) only that window should disappear?
I want to do something like this:
I have not idea about how it is done.
Please suggest just some way of doing that or suggest some topics which can be used here.
To prevent background, pop a black div that overides entire window.
width: 100vw;
height: 100vh;
position: fixed;
z-index: 99;
in that div, place another div with your content to be displayed.
Here is a working example:
let myEl = document.getElementById("hideScreen")
//myEl.style.display = "block";
addEventListener("click", () => {
myEl.style.display = "block";
})
#hideScreen {
top:0; left: 0;
width: 100%;
height: 100%;
position: fixed;
background: rgba(50,50,50,0.9);
display: none;
}
input {
margin: 50vmin;
}
<body>
Some text to be vanished.
Click to activate.
<div id="hideScreen">
<input type="text" id="userReview" placeHolder="your review"></input>
</div>
</body>

How can I close layer popup when I click background or button?

The scenario is as follows.
Default Status (no layer popup)
When I click the button, layer popup shows.
Click the button or outside, layer popup will be hide.
I want to close the layer popup when I click background(outside) or button.
How can I do with Vanilla JS or jquery? (based on HTML)
I would appreciate it if you could answer.
When you open the popup attach a click listener to body that closes it and removes the listener.
You can use this code
//use by id
document.getElementById(#id).style.display = 'block';
document.getElementById(#id).style.display = 'none';
//use by className
document.getElementById(.className).style.display = 'none';
document.getElementById(.className).style.display = 'block';
or use jQuery
$(document).ready(function(){
$("#id").click(function(event){
// $("#id").toggle();
// $("#id").hide();
// $("#id").show();
});
});
Set id for your layer in HTML part like id="layerPopup"
Then on your JS code create event for your button
$(document).on('click', '#btnId', function(){
$("#layerPopup").hide();
});
You should appear a overlay which will cover the whole body, and give it css property z-index to lower from the button, and when apply click function on it same as my code
HTML
<div class="overlay"></div>
CSS
.overlay{
background-color: transparent;
inset: 0;
position: fixed;
z-index: 100;
display: none;
}
button{
z-index: 101;
}
JQuery
$('button').click(function(){
$('.overlay, popup').toggle();
});
$('.overlay').click(function(){
$('.overlay, popup').hide();
});
One standard way to handle such scenario is to have a backdrop div behind the popup and then add an event listener to it. You may choose to change backdrop's background color to increase pop up aesthetics visibly.
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10;
background: rgba(0, 0, 0, 0.75);
}
.modal {
position: fixed;
top: 30vh;
left: 10%;
width: 80%;
z-index: 100;
overflow: hidden;
}
<div class="backdrop" />
<div class="modal" />
And then you can add an event listener on backdrop:
$(document).on('click', '.backdrop', function(){
$(".modal").hide();
});
PS: There may be some syntax issues!

How can i make whole screen semi-black on sidebar open?

I have build sidebar with css and jquery. It's working fine but i want that when sidebar opens then whole screen except sidebar should get semi-black or disabled.
Here is my working
jsFiddle
How can i make whole screen semi-black or disabled on sidebar open?
You can use a box-shadow on the sidebar:
#sidebar{
box-shadow:0 0 0 10000px rgba(0,0,0,.50);
}
This is black, at .50 opacity. It's set to 10000px to cover the full screen.
Or change rgba(0,0,0,.50) to a solid color like #5a5a5a.
In your case add to your css:
#slide-out.visible:not(.close){
box-shadow:0 0 0 10000px #666666;
}
The general concept to achieve this is fairly straightforward:
Modify the javascript to add a class to the body when the nav is open (I called it nav-open.)
Modify the CSS so that the "overlay" element (you already had one in place) is displayed when the body has the class nav-open
Adjust your overlay element CSS to cause it to show properly (for some reason, it had opacity: 0 on it, which meant it was there, but was not visible).
Here's the relevant CSS:
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
// removed opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;
// set display to none by default
display: none;
}
// when the body has the class nav-open, display the overlay
.nav-open #sidenav-overlay {
display: block;
}
Here's the relevant changes to your javascript:
// no-conflict-safe document ready function
jQuery(function($) {
$('#show-hide-menu').click(function() {
if ($('#slide-out').hasClass('visible')) {
// $('#slide-out').removeClass('visible');
$('#slide-out').toggleClass('close');
} else {
$('#slide-out').addClass('visible');
}
// check if the nav is "open"
var open = !$('#slide-out').hasClass('close');
// for simplicity, always first remove the nav-open from the body
$('body').removeClass('nav-open');
// if the nav is open, add the 'nav-open' class to the body
if (open) {
$('body').addClass('nav-open');
}
});
// modify to use "on", is best-practice
// $(document).click(function(e) {
$(document).on('click', function(e) {
var sidebar = $(".sidenav, #show-hide-menu");
if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
$('#slide-out').toggleClass('close');
// be sure the nav-open class is removed when the sidebar is dismissed
$('body').removeClass('nav-open');
}
});
});
Here is a link to your fiddle, modified with these changes to do what you want: http://jsfiddle.net/cale_b/hThGb/8849/
Make a content div below your nav. Something like:
<div id="maincontent" class="">
<p>Lorem.</p>
</div>
Add some styling so it has min-height, etc.
#maincontent {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
min-height: 400px;
}
Add some JS so when the nav menu button is clicked, it toggles on and off a new style class for this area.
$('#show-hide-menu').click(function () {
if ($("div#maincontent").hasClass("overlayed")) {
$("div#maincontent").removeClass("overlayed");
}
else {
$("div#maincontent").addClass("overlayed");
}
});
Define the overlayed class in the CSS.
.overlayed {
background-color: rgba(0,0,0,.8);
}

CSS remove hover effect when semi-transparent div overlays another div

I have several underlaying divs with hover effect. Sometimes I need to show modal dialog and all undelaying divs should be "disabled". This is done by placing semi-transparent high z-index div on top of them, but the problem is that hover effect on underlaying div stays until I move my mouse. Is there a way to "unhover" underlaying divs when overlaying semi-transparent div becomes visible?
Simplified exanple
HTML:
<div class="somediv"></div>
<div id="modal"></div>
CSS:
#modal {
z-index: 1000;
background:#000;
position:fixed;
top:0; left:0;
width:100%;
height:100%;
display: none;
opacity: 0.3;
}
.somediv {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
height: 100px;
background-color: red;
}
.somediv:hover {
background-color: blue;
}
JS:
setTimeout(function(){
$("#modal").show();
}, 5000);
Hover over square and wait 5 seconds.
It should work: http://jsfiddle.net/rjLhj/
When you open a modal (in JS), just add a class to your .somediv ('.no-hover', for example). In CSS, change your .somediv:hover to .somediv:not(.no-hover):hover.
I don't know about compatibility... So, you should test :P
JS:
setTimeout(function(){
$("#modal").show();
$('.somediv').addClass('no-hover')
}, 2000);
CSS:
.somediv:not(.no-hover):hover {
background-color: blue;
}
Update:
http://caniuse.com/#feat=css-sel3
It works on IE9+, FF3.5+ and Safari3.1+... But you can use Attribute Selectors for reach the same result.
HTML:
<div class="somediv" data-nohover="0"></div>
<div id="modal"></div>
CSS:
.somediv[data-nohover="0"]:hover {
background-color: blue;
}
JS:
setTimeout(function(){
$("#modal").show();
$('.somediv').attr('data-nohover','1')
}, 2000);
Or better, add one class to your somediv ('hashover', for example), remove it on modal open and define your css like this:
.somediv.hashover:hover {...}
Unfortunately the browser wont pick up mouse events until the mouse is moved...
The best way to deal with this is to create a new class that overrides the hover behaviour and apply this at the same time as you show the modal.

JQuery Dialog modal option not working

This is the HTML code:
<div id="dialog" title="lala" style="display:none;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
This is the JavaScript
$bb('#addTopicButton').live('click',function() {
$bb( "#dialog" ).dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false });
});
Why modal is not working? When it is opened I still can click other links on the page and do things in the background.
Thanks a lot
UPDATE:
It seems to be working though. Only the links are active in the background and working. How can I disable everything, including links?
You probably just need to include the jQuery UI CSS to your page.
Google has this on its CDN here:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css
The modal option on the dialog creates an overlay under your dialog but over the rest of the content. This overlay needs the jQuery UI CSS to function correctly.
Just had the same issue. I needed the CSS, but I didn't want all of it. So I just copy pasted this part in my own CSS code:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #aaaaaa;
opacity: 0.3;
}
Adding only .ui-widget-overlay to your css will make the overlay appear on the complete top, and even the dialog will be unusable.
Therefore, the .ui-front class too should be added:
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-front {
z-index: 100;
}
I had the same problem I solved it in nearly the same way I went into the 'jquery-ui.theme.css' file searched for '.ui-widget-overlay' and changed the block from:
.ui-widget-overlay {
background: #A9BCD0;
opacity: 1;
filter: Alpha(Opacity=100); /* support: IE8 */
}
to
.ui-widget-overlay {
background: #A9BCD0;
opacity: .3;
filter: Alpha(Opacity=30); /* support: IE8 */
}

Categories