help needed once again.
Have a button that calls modal popup, that in turn calls div.overlay. css snippet of class overlay:
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0.7);
}
pretty standard situation. What I need is, the overlay to acts as sort of filter for the background behind it, to paint the body black and white.
now I know there is css grayscale(), trouble is when I apply
body {
filter: grayscale(100%);
}
along with .overlay - my modal popup turns black and white as well..
Any ideas on how to achieve black and white body, that could not be interacted(cant click on anything behind modal) with like an overlay at the same time not to make modal window black and white too.
You have two options:
1. backdrop-filter
This would be easiest way to do it, but browser support is very poor and pretty much only Safari 9+ supports it properly right now (it might work in Chrome behind a flag).
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: grayscale(1);
backdrop-filter: grayscale(1);
}
.inner {
background-color: #f88;
padding: 20px;
font-size: 50px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Rosa_Red_Chateau01.jpg/360px-Rosa_Red_Chateau01.jpg" width="200">
<div class="overlay">
<div class="inner">
Overlay
</div>
</div>
2. Overlay should not be a child of the filter element
filter will be applied to the element itself and all of its children, therefore the overlay div should not be a child of the filter element if you do not want it to be affected.
In the following example, you would have to toggle the grayed class when you show/hide the overlay.
.grayed {
filter: grayscale(1);
}
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
}
.inner {
background-color: #f88;
padding: 20px;
font-size: 50px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
<div class="app grayed">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Rosa_Red_Chateau01.jpg/360px-Rosa_Red_Chateau01.jpg" width="200">
<!-- The rest of your app is in here -->
</div>
<div class="overlay">
<div class="inner">
Overlay
</div>
</div>
If you're allowed to modify the html structure, you may wrap all of your content in a div and insert the popup outside of it, so you can apply the filter only to the Content when the popup is shown.
Example:
<body>
<div id="content-wrapper">
All of your content goes here
</div>
<div id="my-popup">
This is my popup
</div>
</body>
...now you simply add the filter: grayscale(100%); to the content-wrapper whenever the popup is shown.
To make it simpler.. you can control this by simply adding a class to your <body> whenever you want to show your popup, like so:
/* hide the popup initially */
#my-popup{
display: none;
}
/* gray the content and show the popup
* when the class is added to the body
*/
body.is-popup-open #content-wrapper{
filter: grayscale(100%);
}
body.is-popup-open #my-popup{
display: block;
}
Related
Background
I have an HTML div which contains a ‘tooltip’-like feature (i.e., a text box pops up when a certain element is clicked or hovered over); this tooltip has decorative pseudo-elements to make it look like a ‘speech bubble,’ added in css as :before and :after .
I have a JS script, which is intended to show and hide the tooltip and decoration, in response to click events (i.e., toggle them between ‘show’ and ‘hide’ states).
Problem
I can’t get the decorative pseudo-elements to hide when the tooltip is hidden; as pseudo-elements, they are not part of the DOM and so I can’t use normal selectors to manipulate them.
When the tooltip is hidden on click, the decorative pseudo-elements persist, which is not a usable result.
I can’t do away with the decorative elements, they are part of the work specification.
Approach tried so far
Based on this question, my thought was to add an empty span with its own class, to which I’d prepend and append these pseudo-elements. Then, add or remove the class on click based on whether it exists already, or not.
I have also tried setting the class to which the pseudo-elements are pre/appended to display:none on click, but this also seems not to work
However, I cannot convince the pseudo-elements to hide on click.
I’ve included a screenshot of what these remnant pseudo-elements look like in the live environment.
Note: I tried to work up a running simulation for the purpose of this question, but I wasn’t able to and the original css file is massive; the code included below is for reference only.
All guidance is much appreciated!
const barContainer = document.querySelector(".bar-container");
const decorationElement = document.querySelector("#decoration");
document.addEventListener('click', function(event) {
console.log('click event listener triggered');
if (event.target.closest('.link') || event.target.classList.contains('link')) {
if (barContainer.classList.contains('open')) {
barContainer.classList.remove('open')
decorationElement.classList.remove('decoration')
document.querySelector('.tooltip-container').setAttribute('style', 'display:none');
} else {
barContainer.classList.add('open')
decorationElement.classList.add('decoration')
document.querySelector('.tooltip-container').setAttribute('style', 'display:block');
}
} else {
barContainer.classList.remove('open')
decorationElement.classList.remove('decoration')
document.querySelector('.tooltip-container').setAttribute('style', 'display:none');
}
});
.foo-container {
height: auto;
position: relative;
}
.bar-container {
height: auto;
position: relative;
text-align: center;
}
.bar-container:hover .tooltip-container,
.tooltip-container:hover,
.bar-container.open .tooltip-container {
position: absolute;
display: block;
text-align: left;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
bottom: 50px;
right: 5%;
border-radius: 4%;
font-weight: 300;
max-width: 90%;
font-size: 14px;
padding: 20px 0;
}
/*the below two rule sets create the rotated 'decoration' */
.bar-container:hover .tooltip-container:before,
.tooltip-container:hover:before,
.bar-container.open .tooltip-container:before,
.foo-container .bar-container:hover .decoration:before {
content: "";
width: 65px;
height: 35px;
position: absolute;
overflow: hidden;
transform: rotate(-180deg);
z-index: 10;
bottom: 0;
left: 170px;
background-color: white;
}
.foo-container .bar-container.open .decoration:before,
.foo-container .bar-container:hover .decoration:before {
content: "";
position: absolute;
width: 30px;
height: 30px;
background: #fff;
transform: rotate(45deg);
left: 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 2;
top: -42px;
}
/* end 'deocration' */
<div class="foo-container">
<div class="bar-container">
<p>text <span class='link'>the-link<span id='decoration' class='decoration'></span></span>
</p>
<div class='tooltip-container'>
<p>lorem </p>
</div>
</div>
</div>
Screenshot of the undesirable 'persistent pseudo-elements' behavior -->
In mobile, I'm trying to create a toggle that appears on top of an image, that when tapped on, makes text appear on top of the image too.
I basically want to recreate how The Guardian newspaper handles the little (i) icon in the bottom right corner on mobile.
And on desktop, the the text is there by default under the image and the (i) icon is gone.
So far I've managed to find a similar solution elsewhere online but it's not quite working right as I need it to.
function toggleText() {
var text = document.getElementById("demo");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
#blog {
width: 100%;
}
#blog figure {
position: relative;
}
#blog figure figcaption {
display: none;
position: absolute;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 100%;
color: black;
text-align: left;
background: rgba(0, 0, 0, 0.5);
}
#blog figure button {
position: absolute;
bottom: 0;
right: 0;
color: black;
border: 5px solid black;
}
<div id="blog">
<figure>
<img src="https://cdn2.hubspot.net/hubfs/4635813/marble-around-the-world.jpg" alt="A photo of a slab of marble for example">
<figcaption id="demo" style='display: none'>A photo of a slab of marble for example</figcaption>
<button type='button' onclick="toggleText()">(i)</button>
</figure>
</div>
Don't use IDs. Your code should be reusable!
Don't use inline JS on* handlers, use Element.addEventListener() instead
Don't use inline style attributes.
Don't use el.style.display === "something" to check for display styles. Use Element.classList.toggle() instead
This straightforward example uses JavaScript to simply toggle a className "is-active" on the button's parent, the figure Element.
Everything else (icon symbol change, caption animation etc...) is handled purely by CSS:
document.querySelectorAll("figure button").forEach(EL_btn => {
EL_btn.addEventListener("click", () => {
EL_btn.closest("figure").classList.toggle("is-active");
});
});
/* QuickReset */ * {margin: 0; box-sizing: border-box;}
img {
max-width: 100%; /* Never extend images more than available */
}
figure {
position: relative;
overflow: hidden; /* overflow hidden to allow figcaption hide bottom */
}
figure img {
display: block; /* prevent "bottom space" caused by inline elements */
}
figure figcaption {
position: absolute;
width: 100%;
bottom: 0;
padding: 1rem;
padding-right: 4rem; /* Prevent text going under the button icon */
color: #fff;
background: rgba(0, 0, 0, 0.5);
transform: translateY(100%); /* Move down, out of view */
transition: transform 0.3s; /* Add some transition animation */
}
figure.is-active figcaption {
transform: translateY(0%); /* Move into view */
}
figure button {
position: absolute;
width: 2rem;
height: 2rem;
bottom: 0.5rem;
right: 0.5rem;
border-radius: 50%;
color: #fff;
background: rgba(0, 0, 0, 0.5);
border: 0;
cursor: pointer;
}
figure button::before {
content: "\2139"; /* i icon */
}
figure.is-active button::before {
content: "\2A09"; /* x icon */
}
<figure>
<img src="https://cdn2.hubspot.net/hubfs/4635813/marble-around-the-world.jpg" alt="A photo of a slab of marble for example">
<figcaption>A photo of a slab of marble for example</figcaption>
<button type="button"></button>
</figure>
The above will work for any number of such elements on your website without the need to add any more CSS or JS.
I see a couple things that could mess this up, one is the fact that there is nothing to make your image adjust to your mobile screen, more-over there is also margin that is there by default, so I suggest these changes to the CSS:
First I'd set box-sizing to border-box and margin to 0, this should be a regular practice by the way.
*{
box-sizing: border-box;
margin: 0;
}
Then select the image and make it adjust to your page as such
#blog figure img{
height: auto;
width:100%;
}
Finally, for some styling you can add some padding to your blog div to make the image slightly smaller on your screen
#blog {
width: 100%;
padding: 35px;
}
This is the Fiddle for it.
Objective:
I would like the Header, Tab Section, and the Radio Button Section to be fixed in a form (see image below). Meaning that they should always be in view, and never have any overlapping elements.
The form looks like the following:
This is working fine when I simply scroll down on the form:
The Problem:
When I open the Angular Material dropdown, it overlaps over the Radio Button Section:
Here is the HTML. The highlighted sections are the elements that I want to be fixated on the form:
And here is the CSS for the 3 sections
//Header:
.module__header {
position: fixed;
top: 0px;
z-index: 1001;
display: flex;
height: 35px;
width: 100%;
background-color: #082749;
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
align-items: center;
justify-content: stretch;
padding: 0;
margin-bottom: 0;
}
// Tab Section:
.mat-tab-label-container {
position: fixed;
top: 35px;
padding-top: 10px;
z-index: 1001;
width: 100%;
background: #fff;
}
// Radio Button Section:
.timaticFullTextView {
padding-top: 35px;
padding-left: 15px;
padding-bottom: 15px;
background: #fff;
z-index: 1001;
position: fixed;
width: 100%;
border-bottom: 1.5px solid gray;
}
I have tried changing the cdk-overlay-container to a z-index of <1001, but that still is overlapping the Radio Button Section.
How can I have the opened dropdown display underneath all 3 sections?
Edit: Adding screenshot to show the cdk-overlay that is giving issues. I have tried removing and lowering the z-index, but it doesn't have any effect
The problem is that mat-tab-body has z-index: 1 and this won't allow your fixed view inside to have a higher elevation. You can remove the z-index from mat-tab-body put then your content without a z-index won't be clickable anymore so you have to add a z-index and position to your not fixed content.
The code would have to look something like this:
<mat-tab>
<mat-tab-body> <!-- <-- added automatically -->
<div class="tab-header"></div>
<div class="tab-content"></div>
</mat-tab-body>
</mat-tab>
::ng-deep mat-tab-body {
z-index: unset !important;
}
.tab-header {
position: fixed;
z-index: 1001;
}
.tab-content {
position: relative;
z-index: 1;
}
You've found the right element whilst applying styles to the wrong one.
Here is how I made it work
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 99999 !important;
}
I'm making a website with a Lightbox image gallery on it. Everything with the gallery and the layout of the page work works perfectly except for one thing.
In desktop view, it's working, but when I try to open it on a phone (or reduce the width of my browser window to the minimum) the lightbox gallery overlays the header menu of the site.
I will provide the HTML and CSS I made to put the header and in their place.
I tried using position fixed absolute and realitive on the header but it didn't work. I have no idea how to fix this to be honest.
The HTML of the header:
<header>
<ul>
<li>Home</li>
<li>Shiatsu</li></strong>
<li>Terapia Holística</li>
<li>Terapia com Cristais</li>
<li>Pantaloterapia</li>
</ul>
</header>
The HTML of the gallery:
<div class="gallery">
<img src="images/holistica/1.jpeg">
<img src="images/holistica/2.jpeg">
</div>
The CSS of the header:
header {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
height: 100px;
width: 100%;
background: #f9f3ff;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
}
The CSS of the gallery:
.gallery img {
width: 100%;
max-width: 230px;
height: 230px;
margin: 10px 10px 0 0;
filter: grayscale(100%);
transition: 1s;
}
.gallery img:hover {
filter: grayscale(0);
transform: scale(1.1);
}
I didn't modify the javascript of the lightbox the code is very long, you can see it here: https://lokeshdhakar.com/projects/lightbox2/
I used the lightbox-plus-jquery.min.js.
How can I make so that when the user scrolls down in mobile view, the header overlays the image gallery?
It seems a problem of z-index. Looking at the CSS styles of lightbox (.lightboxOverlay with z-index: 9999 and .lightbox with z-index: 10000), it would be enough to add a z-index: 10001 or more to the .header styles.
Today I come to you with an issue with jQuery / javascript and .fadeToggle();.
So I want to P elements with id.
Please see here:
$("#here").click(function(){
$(".overlay, .popup").fadeToggle();
});
$("#there").click(function(){
$(".overlay, .popup2").fadeToggle();
});
Here is my JSFiddle:
I want, ideally, to have several paragraphs with individual ids so I can add a pop up with differing content!
I'd usually use a custom data attribute for something like this. This way you can reuse the same function no matter how many elements you have...
$('.clickable').click(function() {
var popupTarget = $(this).data('popup');
$('.overlay, '+popupTarget).fadeToggle();
});
/* click overlay to close... */
$('.overlay').click(function() {
$('div').fadeOut();
});
html,
body {
height: 100%;
}
.overlay {
position:absolute;
display:none;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.7);
/* stretch to screen edges */
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.popup, .popup2 {
position: absolute;
width: 300px;
height: 150px;
display: none;
background-color: white;
text-align: center;
/* center it ? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="overlay"></div>
<div class="popup">Some popup text</div>
<div class="popup2">Hello world!!</div>
<!-- add a class to each element and a data attribute to identify the target element... -->
<p id="here" class="clickable" data-popup=".popup">Click 1</p>
<p id="there" class="clickable" data-popup=".popup2">Click 2</p>