LeanModal overlay seems to cover the modal itself - javascript

Hi there, I've downloaded LeanModal, but whenever I show the modal, it seems the overlay is applying to even the modal itself.
I assumed it was a z-index fix, but it seems that (when looking in chrome dev tools) that the z-index is being applied after the fact by leanmodal, and the CSS is ignored.
#lean_overlay {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
height:100%;
width: 100%;
background: #000;
display: none;
}
// can't get it to sit above the overlay
#popup {
z-index: 150; // it looks like it's being overwritten in dev tools
width: 600px;
padding: 30px;
display: none;
background: #FFF;
}
$("#i").leanModal();
Anyone else run into this?
Thanks

Related

Changing the values of object.style.alignSelf

Let's say I have a function that changes the Align Self css property via JS.
HTML
<img id= "arrow" src="/images/leftarrow.svg">
CSS
.container {
background-color: $white;
box-shadow: 2px 0px 4px 1px black;
width: 400px;
height: 100vh;
display: flex;
flex-direction: column;
visibility: visible;
position: relative;
z-index: 2;
}
#arrow {
height: 25px;
width: 25px;
position: absolute;
align-self: flex-end;
top: 50vh;
cursor: pointer;
background-color: $white;
border-radius: 50%;
}
JS
function reverseIcon () {
arrow.style.alignSelf = "flex-start";
}
arrow.addEventListener("click", reverseIcon);
Javascript doesn't seem to change the align self property straight away. When I click, it does not change. I jumped into devTools to see what was wrong and it was applied when there was a change in the screen(?). I have no media queries. I tried this on 3 different browsers but AlignSelf doesn't seem to show up on the screen right away. It only actually changes as soon as I jump into devtools or like change the size of the screen. Anyone know why?
**Nevermind, Seems like only Chrome isn't responding to it. Still don't understand what part of this code isn't compatible with Chrome then
Are you sure the alignSelf property gets applied when you change your screen size?
Or is it just the default bahavior? In Dev-Tools, if you inspect, do you see the style-attribute at your image element? If yes, than it could be that your #arrow selector overrides it. If that's the case, I would try to toggle between a class where you can use the !important rule to override the property. Like so:
.flex-start{
align-self: flex-start !important;
}

Z-Index of Material Dropdown component not layering underneath a fixed div when opened

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;
}

adjusting Pop up window position based on page scroll position and closing by clicking out.

So I know there are plenty of feeds about these issues and I've been through most of them yet I can't make it work. I get really lost with .js.
So I'm using very simple pop up windows that provide more contents on a topic by cicking on the title of the topic. I'm using a simple css code:
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
left: 20%;
top:25%;
width: 70%;
height: auto;
padding: 10px;
border: 6px solid #ed7d86;
background-color: white;
text-align: center;
z-index: 1002;
overflow: auto;
}
And html:
<div class="flex-item">
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='block';
document.getElementById('fade').style.display='block'">TITLE</a>
<div id="TITLE" class="white_content">Something else about TITLE.
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='none';
document.getElementById('fade').style.display='none'">Close</a></div>
</div>
This code works great until I try it on elements that are lower on the page in which case the box obviously continue showing at the set top and left position, which means that I have to scroll back up to see it. If I get rid of top and left conditions, I just end up with the box showing up randomly at some corner of the page.
I also want people to be able to leave the box just by clicking on the black_overlay area. Can anyone recommend a fix that would work with my code?
Ah well, not much success with my question. Wanted to let you know that I changed the position of the .white_content to fixed and it solved my problem for positioning. I'm still working on closing the window by clicking outside the box without changing all my code.

Disable Anchor Within Hover Div on Mobile Until Open

I've searched high and low but can't find a solution to this exact problem.
On a desktop browser, when the user hovers over an image, a div appears and they can click the link within the div if they want. However, on a mobile device, the hover is triggered by a click. If the user clicks in just the right spot, even though the div isn't visible yet, they can accidentally click the anchor and navigate away from the page. (In other words, the div goes from display:none to display:block at the same time that the link is clicked.)
I want to prevent that accidental click from happening on mobile browsers, however I still want the link to be usable once the div is visible.
My code:
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | Email John
</div>
</div>
Any ideas? HTML, CSS, JS and jQuery solutions are all welcome! (Maybe something more clever than what I can think of using pointer-events:none along with some jQuery?)
I'm actually about to encounter the same problem in a project, and jotted down a potential solution. Haven't tested it yet but it might help you out. The link should only trigger if the element has a display that's not 'none':
var popup = $('.popup'),
display = popup.css('display');
if (!(display === 'none')) {
popup.on('click', function(e) {
e.preventDefault();
});
}
I found a solution but it's not elegant. I wanted to post it in case someone has this problem in the future and just needs something that will work!
I added a fake link in a span with the real link then set new display styles for it and the real link based on the parent span is being hovered over.
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.staffpic a {
display: none; /* Added */
}
.staffpic.link:hover a {
display: inline; /* Added */
}
.staffpic.link:hover .fakelink {
display: none; /* Added */
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | <span class="link">Email John<span class="fakelink">Email John</span></span>
</div>
</div>
I'd still love a cleaner solution without all this added html if someone has it.

How to create a modal popup using javascript and CSS

Actually, two questions:
How can I create a modal popup with background color of gray?
Also I need to create for a cover background color only to table itself. Not to overall page.
How do I do this using javascript and css?
Here is the HTML, which should probably be inserted with JS, and the styles should be in an external stylesheet.
<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>
Then, you could leverage jQuery to display it.
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(800);
});
This is only a start, you'll want to learn from this and build upon it. For example, the script should check is(':hidden') and show, and if not then fadeOut(800) or similiar.
I use this for the mask that sits on top of the screen
.Mask {
display: none;
width: 100%;
height: 100%;
z-index: 9000;
padding: 0px;
margin: 0px;
background: transparent url(http://i.imgur.com/0KbiL.png);
position: fixed;
top: 0px;
overflow: hidden;
}

Categories