I have this code:
<body>
<div>
xxx
</div>
<div id="error"
ng-show="er.msg">
<div style="color: white; background-color: purple; height: 2rem; display: flex; align-items: center;">
<div style="width: 90%; margin-right: auto; margin-left: auto;">{{ er.msg }} </div>
</div>
</div>
<div>
xxx
</div>
</body>
Is there a way that I can make a mask appear over the whole page to prevent user input while the error dialog is showing? Note this is angular so I can make a div show with ng-show="er.msg" or I can hide a div with ng-show="!er.msg".
If you look at bootstrap modal implementation, you can easily achieve that yourself.
You will mainly need 3 css classes
//To cover the whole page with transparent window, clicking this should close the modal window.
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
opacity: 0.5;
}
//Actual modal window above transparent window with higher z-index
.modal {
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
}
// This is to attach to body tag to remove scroll bar, to prevent double scroll bar. when dialog is closed this class should be removed.
.modal-open {
overflow: hidden;
}
Related
I want the mouse to be able to scroll the underlying content even if the mouse is inside the blue area.
is there any way to solve
.account {
width: 200px;
height: 600px;
background-color: #0c82df;
position: absolute;
top: 0;
left: 200px;
z-index: 10;
}
.account-1 {
width: 500px;
height: 800px;
overflow-y: scroll;
background-color: #00bfad;
}
body {
overflow: hidden;
padding: 0;
margin: 0;
}
<div class="account-1">
<p>时间到了分开就是浪费</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>时间到了分开就是浪费</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>时间到了分开就是浪费</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>时间到了分开就是浪费</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>时间到了分开就是浪费</p>
</div>
<div class="account">
</div>
if you wanna ignore element while scroll use
.account{pointer-events:none}
this property disable any interaction with mouse cursor
MDN Docs
if you wanna scroll .account-1 when hover on .account you must put .account block inside .account-1 block, then .account-1 not lose focus
I'm trying to darken the rest of my screen when my modal pops up. I got the code from here: https://jasonwatmore.com/post/2018/05/25/angular-6-custom-modal-window-dialog-box
What ends up happening is my entire screen goes dark and opaque even before I open the module.
I'm not sure if there is something I'm doing wrong in the CSS or if there is a mistake in the HTML
Here is my code:
....
/* MODAL STYLES
-------------------------------*/
.closed{
display:none;
}
.modal {
/* modal container fixed across whole screen */
background: #fff;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
/* z-index must be higher than .modal-background */
z-index: 1000;
/* enables scrolling for tall modals */
overflow: auto;
.modal-body {
padding: 20px;
background: #fff;
/* margin exposes part of the modal background */
margin: 40px;
}
.modal-header{
padding: 20px;
background: #fff;
/* margin exposes part of the modal background */
margin: 40px;
}
}
.modal-background {
/* modal background fixed across whole screen */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* semi-transparent black */
background-color: #000;
opacity: 0.75;
/* z-index must be below .modal and above everything else */
z-index: 1;
}
body.modal-open {
/* body overflow is hidden to hide main scrollbar when modal window is open */
overflow: hidden;
}
....
HTML:
<modal id="custom-modal-2" >
<div class="modal" style="height:100px; width: 100px;">
<div class="modal-body">
<h1 >A Custom Modal!</h1>
<p>
Home page text: <input type="text" [(ngModel)]="bodyText" />
</p>
<button (click)="closeModal('custom-modal-2');">Close</button>
</div>
</div>
<div class="modal-background"></div>
</modal>
So your modal is set to be displayed automatically and so you are displaying the whole thing once it is added to your page. You can add the "closed" class to your modal as a default, then have the open and close button change that value.
One thing you may want to consider, if you aren't already doing it, is having the modal with a state of isOpen, and then have that be the trigger for whether or not it is displaying the modal. The reason I would suggest this is because that way the logic is based on something you can see in the Javascript itself and control that with {{isOpen}} rather than adding and removing a class.
I have 3d canvas with z-index : -1
I want to display components on z-index: 0 and be able to click 3d canvas without any problems. Unfortunately when I add component A to z-index: 0 margin of this component is spread horizontally and I'm unable to click 3d canvas one the left and right side of component A.
.background-3d-canvas {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
background-color: silver;
}
.front-component {
background-color: blue;border-radius: 10px;
padding: 20px;
margin: auto;
width: 300px;
background-color: blue;
}
<div class="background-3d-canvas">
Test<br/>
Test2<br/>
Test3<br/>
Test4<br/>
Test5<br/>
Test6<br/>
</div>
<div class="front-component">
Editor
</div>
I created jsfiddle to demonstrate this problem. Not all links are clickable.
https://jsfiddle.net/ec5uuthy/
You can add those attributes to .front-component:
pointer-events: none;
position: absolute;
left: 0;
right: 0;
https://jsfiddle.net/76bpqge1/
I'm trying to make a div that stretches over the screen and that the user needs to click to dismiss. It works well on computer and Android phones but not on the lesser unit iPhone.
Here is the code:
.hidden-overflow {
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
z-index: 10;
background-color: #FFF228;
}
.overlay.ng-hide-add {
transition: .8s linear all;
height: 100%;
overflow: hidden;
}
.overlay.ng-hide-add-active {
height: 0;
}
<div ng-if="showOverLay">
<div class="overlay" ng-init="overlayShow()" ng-click="overlayRemove()" ng-hide="hideOverlay">
<h1 class="header" data-translate>Welcome!</h1>
<h2 class="header" data-translate>JADA JADA JADA <br>Click to continue</h2>
</div>
</div>
It seems like its the overflow that isn't working. How can I fix this?
Since you're already using an absolute positioned element, I would disregard height and width entirely and stretch the image to the entirety of the page using positioning:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#overlay {
background: tomato;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="overlay"></div>
</body>
Going a step further, you likely want the overlay to not scroll away on longer pages. For this, use position:fixed. This only has the disadvantage of scrolling still being enabled; so if a user scrolls, the overlay will look correct, but once they click it away, they will end up in the middle of the page. Addressing this requires a JS solution that goes beyond the scope of this question.
I have my resume in an iframe div that overlays my portfolio section when a link in my nav is clicked. I have an "X" image for user to click to close overlay, and I want to place it to the right of the resume iframe (ie: it butts up against the outer right edge of the iframe).
I can't seem to figure out how to do this - I tried using various different float, positioning and margin setups but the closest I can get is where the "x" is on the right side but its position moves with the window rescaling. I would like for it instead to "stick" to the right edge of the resume and stay there! Is there a way to do this? Here is my code:
HTML:
<header>
<nav></nav>
</header>
<div id="resume-overlay">
<div id="resume">
<iframe src="resume.html"></iframe>
<img class="button" src="img/x-button.png">
</div>
</div>
<div id="portfolio">
</div>
CSS:
header {
height: 80px;
width: 1600px;
position: fixed;
top: 0px;
z-index: 1;
background-color: white;
margin-left: 100px;
}
#resume-overlay {
display: none;
position: fixed;
z-index: 2;
top: 80px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .9);
}
.resume {
position: relative;
max-width: 1600px;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
}
.button {
position: absolute;
z-index: 3;
right: 0;
padding-right: 10%;
}
And my jQuery if needed:
$(function() {
$('#overlay').on('click', function() {
$('#resume-overlay').fadeToggle('fast');
});
$(".button").click(function(event) {
event.preventDefault();
history.back(1);
$('#resume-overlay').fadeToggle('fast');
});
});
To illustrate, I want to move that blue X to the right edge of the white box
I'm not sure they type of error you're seeing yet, but your code here:
.button {
position: absolute;
z-index: 3;
right: 0;
padding-right: 10%;
}
Is all I think you need to address, try adding
top: 0;
right: 0;
And remove the padding, work with those values to get the button where you want it, and it shouldn't move from those setting regardless of window size.