Page scrolls down when I open modal window - html

I have a long page, on which there are several anchor tags which open modal windows. (a href #)
When I click on it, the modal window opens and the background main page scrolls down a bit. When I close the modal window, it scrolls up a bit, but not to the top. This is causing bad user experience.
Opening the modal on a page which has no scrollbar is fine.
I have looked into various solutions, but none worked out for me whatsoever.
.modal {
display: none; /* Hidden by default */
position: absolute; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
overflow-y: auto;
width: 100%; /* Full width */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
font-family: 'Georgia', monospace, serif;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
font-family: 'Georgia', monospace, serif;
border: 1px solid #888;
width: 400px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.modal-header {
padding: 2px 16px;
background-color: black;
color: white;
font-family: 'Georgia', monospace, serif;
}
/* Behaviour on legacy browsers */
.target:target + .modal {
display: block;
}
/* Fallback for IE8 */
.modal.is-expanded {
display: block;
}
.modal.is-expanded > .content {
top: 50%;
margin-top: -45px;
}
/* Behavior on modern browsers */
:root .modal {
display: block;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
transition: transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5);
transform-origin: center center;
transform: scale(0, 0);
}
:root .modal > .content {
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}
:root .target:target + .modal {
transform: scale(1, 1);
}
/* The Close Button */
.close-btn:hover,
.close-btn:focus {
cursor: pointer;
}
.modal > .modal-content .modal-header .close-btn {
position: absolute;
top: 18px;
right: 18px;
width: 15px;
height: 15px;
color: white;
font-size: 18px;
text-decoration: none;
}
.modal-body {padding: 2px 16px;}
.modal-open {
-moz-appearance: menuimage;
}
.modal-open::-webkit-scrollbar {
width: 0 !important;
}
<span id="start" class="target"><!-- Hidden anchor to close all modals --></span>
<span id="userinfo" class="target"><!-- Hidden anchor to open adjesting modal container--></span>
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>User Info</h2>
<a class="close-btn" href="#start" ><i class="fa fa-times"></i></a>
</div>
<div class="modal-body">
content....
</div>
</div>
</div>
<i class="fa fa-user fa-lg"></i>
Any help would be appreciated.

OK I found a solution. It is not smooth, because you can see how the scrollbar moves up and down for some miliseconds, but the background page remains on top at least
This did the trick for me:
<script>
$(document).ready(function () {
$(window).on('hashchange', function (event) {
window.scrollTo(0, 0);
});
});
</script>

Related

HTML / CSS - custom modal with overflowing content

I am building a modal for my React project. Initially, I was using the SweetAlert library but it was messing with the way React is supposed to work. I'm not going to go into the details about that since it's irrelevant to this post. So I ended up building my own modal.
What I have so far:
.modal {
left: 50%;
transform: translate(-50%);
height: 100% width: 90%;
position: absolute;
background: #212121;
padding: 2rem;
z-index: 10;
border-radius: 10px;
color: white;
top: 1rem;
}
.modalContent {
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
<div class="modal">
<span>×</span>
<div class="content">
</div>
</div>
What I want to accomplish is to move the content scrollbar outside to the scroll-track and hide the page scrollbar. The reason I am using overflow on the content rather than on the modal itself is that the close button needs to always remain visible even when scrolling the content.
Use a screen size wrapper div without background-color and give it a scroll of auto in y direction
leave the modal closing button to the inner visible div
<div class="modal background_none full_width full_height">
<div class"visible_modal with_with background color">
<span>×</span>
<div class="content">
</div>
<div>
</div>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
</body>
</html>

Want to replicate youtube's autoplay toggle button in pure css

Until recently youtube used a tag named "paper-toggle-button". My script used that but since youtube removed it I've had to settle with a normal boring checkbox.
I don't just want an answer. I want to learn how it works. It bugs me that this advanced css doesn't click for me yet.
I've been trying to replicate it via tutorials that show in various ways how to make a sliding toggle button. But I'm not satisfied with the look. I want it to look as close to the youtube's toggle button as possible. At least one thing I've learned. The code below doesn't need any pictures which is good.
This requires advanced knowledge of css which I don't have.
Here's an example and it looks ugly. Because it must for instance manually put the label in the correct place. See .labelterm. I gave up when I couldn't use this tutorial code to add a checkmark.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Awesome checkbox</title>
<style type="text/css">
.mylabel {
position: relative;
display: block;
width: 60px;
height: 30px;
margin-bottom: 15px;
}
.mylabel input {
display: none;
}
.slidinggroove {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #ababab;
/*background: rgba(0, 0, 0, 0.1);*/
border-radius: 20px;
transition: all 0.3s ease;
}
.slidinggroove:after {
position: absolute;
content: "";
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
/*background: rgba(255, 255, 255, 0.2);*/
top: 1px;
left: 1px;
transition: all 0.3s ease;
}
input:checked + .slidinggroove {
background: #5fcf80;
}
input:checked + .slidinggroove:after {
transform: translateX(30px);
}
.labelterm {
margin-left: 65px;
font-size: 16px;
color: #222;
font-family: "Roboto", sans-serif;
position: relative;
top: 5px;
}
</style>
</head>
<body>
<div class="mylabel">
<input type="checkbox" id="coding">
<div class="slidinggroove"></div>
<label class="mylabel" for="coding" name="skills"><p class="labelterm">Test</p></label>
</div>
</body>
</html>
Here's how I would tackle this to achieve the look of the picture shown:
.slidinggroove::before{
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-7px);
width: 20px;
height: 20px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
display: block;
color: #fff;
}
You must import a library for the icon as a font, I recommend using FontAwesome as shown in the working snippet here :
.mylabel {
position: relative;
display: block;
width: 60px;
height: 30px;
margin-bottom: 15px;
}
.mylabel input {
display: none;
}
.slidinggroove {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #ababab;
/*background: rgba(0, 0, 0, 0.1);*/
border-radius: 20px;
transition: all 0.3s ease;
}
.slidinggroove:after {
position: absolute;
content: "";
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
/*background: rgba(255, 255, 255, 0.2);*/
top: 1px;
left: 1px;
transition: all 0.3s ease;
}
.slidinggroove:before {
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-7px);
width: 20px;
height: 20px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
display: block;
color: #fff;
}
input:checked+.slidinggroove {
background: #5fcf80;
}
input:checked+.slidinggroove:after {
transform: translateX(30px);
}
.labelterm {
margin-left: 65px;
font-size: 16px;
color: #222;
font-family: "Roboto", sans-serif;
position: relative;
top: 5px;
}
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Awesome checkbox</title>
</head>
<body>
<div class="mylabel">
<input type="checkbox" id="coding">
<div class="slidinggroove"></div>
<label class="mylabel" for="coding" name="skills"><p class="labelterm">Test</p></label>
</div>
</body>
</html>
The way it works is as follow, you create a pseudo-element that will have as content the unicode of the fontawesome icon. Then you have a complete control hover it (font-size, color, ...).
Appreciate your eagerness of leaning. Let’s break the problem down and tackle each of them then merge them together to have a complete solution. Apparently, we need several things:
An oval shape background for the toggle to move. Lets call it pit
A circle that can be move to left or right. Lets call it knob.
The control need to have its own state, for checked and unchecked. We can make use of an native checkbox
The color of the control will change along the state.
Animation
We start with the basic first. To draw the toggle with html:
<div class="toggle">
<input class="toggle__input" type="checkbox"> <span class="toggle__pit"> <span class="toggle__knob"></span>
</span>
</div>
the toggle serve as the container of the whole toggle. Inside there is a a native checkbox element, toggle__pit and a toggle__knob. Without css they are just white square. Lets style it according to the sample image.
.toggle__pit {
/* set the size */
width: 36px;
height: 16px;
/* set the color */
background-color: #bababa;
border: 1px solid #bababa;
/* set the oval shape, value = height /2 */
border-radius: 8px;
/* border width is part of the element size */
box-sizing: border-box;
/* display span as a inline block element */
/* span is a inline element which cant assign width and height*/
display: inline-block;
}
.toggle__knob {
/* set the size */
width: 14px;
height: 14px;
/* make it circle */
border-radius: 50%;
background-color: white;
display: inline-block;
}
.toggle .toggle__input {
/* keep the checkbox hidden */
display: none;
}
<div class="toggle">
<input class="toggle__input" type="checkbox"> <span class="toggle__pit">
<span class="toggle__knob"></span>
</span>
</div>
Now the toggle looks like the sample image, but it is in unchecked state. We need to make it interactive so it responses to user action. Since the checkbox is hidden, user cannot interactive with it. We can use <label> to associate with the input. In this way even the input is hidden we can toggle it. We need to modify the html a bit, to have the input wrap by the label.
.toggle__pit {
/* set the size */
width: 36px;
height: 16px;
/* set the color */
background-color: #bababa;
border: 1px solid #bababa;
/* set the oval shape, value = height /2 */
border-radius: 8px;
/* border width is part of the element size */
box-sizing: border-box;
/* display span as a inline block element */
/* span is a inline element which cant assign width and height*/
display: inline-block;
}
.toggle .toggle__pit::after {
/* if the checkbox is checked, move knob to right */
content: 'L';
font-family: Helvetica, Arial, Sans-Serif;
color: white;
font-size: 12px;
display: inline-block;
transform: translateX(4px) translateY(-3px) scaleX(-1) rotate(-40deg);
transform-origin: 50% 50%;
}
.toggle__knob {
/* set the size */
width: 14px;
height: 14px;
/* make it circle */
border-radius: 50%;
background-color: white;
display: inline-block;
/* for position it to left or right */
position: absolute;
}
.toggle__label {
/* act as a reference point for knob positioning */
position: relative;
line-height: 16px;
}
.toggle .toggle__input {
/* keep the checkbox hidden */
display: none;
}
.toggle .toggle__input:checked+.toggle__pit {
/* if the checkbox is checked, change pit color */
background-color: #167ac6;
border: 1px solid #167ac6;
}
.toggle .toggle__input:checked+.toggle__pit .toggle__knob {
/* if the checkbox is checked, move knob to right */
left: 21px;
}
<div class="toggle">
<label class="toggle__label"> <input class="toggle__input" type="checkbox"> <span class="toggle__pit">
<span class="toggle__knob"></span>
</span>
</label>
</div>
Finally, to smoothen the state transition, add some transition to toogle__knob and toggle__pit.
.toggle__pit {
/* set the size */
width: 36px;
height: 16px;
/* set the color */
background-color: #bababa;
border: 1px solid #bababa;
/* set the oval shape, value = height /2 */
border-radius: 8px;
/* border width is part of the element size */
box-sizing: border-box;
/* display span as a inline block element */
/* span is a inline element which cant assign width and height*/
display: inline-block;
transition: background-color 0.5s linear, border 0.5s linear;
}
.toggle .toggle__pit::after {
/* use L to mock a tick*/
content: 'L';
font-family: Helvetica, Arial, Sans-Serif;
color: white;
font-size: 12px;
/* pseudo-element is inline by defauly, which you can't apply transform*/
display: inline-block;
/* flip L horizontally and rotate it */
transform: translateX(4px) translateY(-3px) scaleX(-1) rotate(-40deg);
transform-origin: 50% 50%;
}
.toggle__knob {
/* set the size */
width: 14px;
height: 14px;
/* make it circle */
border-radius: 50%;
background-color: white;
display: inline-block;
/* for position it to left or right */
position: absolute;
left: 1px;
/* enable animation */
transition: all 0.5s linear;
}
.toggle__label {
/* act as a reference point for knob positioning */
position: relative;
line-height: 16px;
}
.toggle .toggle__input {
/* keep the checkbox hidden */
display: none;
}
.toggle .toggle__input:checked+.toggle__pit {
/* if the checkbox is checked, change pit color */
background-color: #167ac6;
border: 1px solid #167ac6;
}
.toggle .toggle__input:checked+.toggle__pit .toggle__knob {
/* if the checkbox is checked, move knob to right */
left: 21px;
}
<div class="toggle">
<label class="toggle__label"> <input class="toggle__input" type="checkbox"> <span class="toggle__pit">
<span class="toggle__knob"></span>
</span>
</label>
</div>

unable to set the exact css for login page

i want to create a login page like this : https://i.stack.imgur.com/smEWd.jpg
but what i get is :
https://i.stack.imgur.com/DvpEL.jpg
import React, { useState } from "react";
import Header from "./Header";
// import { Button, FormGroup, input, label } from "react-bootstrap";
import "./Login.css";
export default function Login1(props) {
// const [email, setEmail] = useState("");
// const [password, setPassword] = useState("");
const [user, setUser] = useState({email : "", password : ""})
function validateForm() {
return user.email.length > 0 && user.password.length > 0;
}
function handleSubmit(event) {
event.preventDefault();
}
return (
<div className="Login">
<Header person = {user}/>
<form className="modal-content animate" onSubmit={handleSubmit}>
<div><h3 align='center'>Login</h3>
</div>
<div className="Container">
<input type="text"
autoFocus
placeholder="Username"
value={user.email}
onChange={e => setUser({...user,email : e.target.value})}
/>
{/* {console.log(user)} */}
<br/>
<input type="password" placeholder="Password"
value={user.password}
onChange={e => setUser({...user,password : e.target.value})}
/>
<br/><button disabled={!validateForm()}type="submit">
Login
</button>
</div>
<div id="footer">
<button className="submit1" disabled="true" type="submit">
Sign up
</button>
<br/><button className ="submit1" disabled="true" type="submit">
Forgot Password?
</button>
</div>
</form>
</div>
);
}
#media all and (min-width: 480px) {
.Login {
padding: 120px 0;
}
.Login form {
margin: 0 auto;
max-width: 480px;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 80%; /* Full width */
height: 80%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 100px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 10px auto; /* 15% from the top and centered */
border: 1px solid #888;
border-radius: 15px;
width: 120%; /* Could be more or less, depending on screen size */
}
.footer {
background-color: #9fa9a3;
margin: 10px auto; /* 15% from the top and centered */
border: 1px solid #888;
border-radius: 15px;
width: 80%; /* Could be more or less, depending on screen size */
}
input[type=text], input[type=password] {
width: 100%;
padding: 10px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.container {
padding: 30px;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
h3{
font-family:"Arial Black", Gadget, sans-serif;
font-size: 30px;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.0s;
animation: animatezoom 0.0s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
} */
form {
border: 3px solid #f0f0f0;
}
}
I tried changing the width and CSS of the code. but still i couldn't get the exact login page design. could someone help me with this?
I have added the code snippet. I am doing this using react. I have done this html code in login.js and i have attached the CSS along with.
I added a className to Login button - submit0
<button className="submit0" disabled={!validateForm()} type="submit">
Login
</button>
You've given id footer but you were using .footer in .css file, instead you've to use #footer.
Added css for background-image
.Login {
background-image: url(https://i1.wp.com/512pixels.net/downloads/macos-wallpapers-thumbs/10-12--thumb.jpg?zoom=1.25&w=640);
background-repeat: no-repeat;
background-size: cover;
padding: 120px 0;
}
Opacity to Login Form
.Login form {
margin: 0 auto;
max-width: 480px;
opacity: 0.9;
}
Removed border from .modal-content
.modal-content {
background-color: #fefefe;
margin: 10px auto; /* 15% from the top and centered */
/* border: 1px solid #888; */
border-radius: 15px;
width: 120%; /* Could be more or less, depending on screen size */
}
Footer css -
#footer {
/*background-color: #9fa9a3;
margin: 10px auto; /* 15% from the top and centered */
/* border: 1px solid #888;
border-radius: 15px; */
/*width: 100%; Could be more or less, depending on screen size */
background-color: #666;
margin-top: 10px;
border-bottom-left-radius: 11px;
border-bottom-right-radius: 11px;
}
For input field and login button, added left, right margin, border-radius and changed the width to 90%
input[type="text"],
input[type="password"] {
width: 90%;
padding: 10px 10px;
margin: 8px 24px;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 11px;
}
Buttons css -
.submit0 {
width: 90%;
margin: 8px 24px;
border-radius: 11px;
}
.submit1 {
background-color: inherit;
}
CodeSandbox Link
for testing is css file classes read correctly try put some custom inline styling in page and see this is work correctly if this work ok then you should check css class in main file and with inspect element check is Login.css loading on page
for inline styling : https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

How to make this image lightbox work for both horizontal and vertical images?

I need to create an image lightbox. I basically started from this example from w3school, https://www.w3schools.com/howto/howto_js_lightbox.asp
However, it doesn't work for portrait oriented images. Eg. a landscape image is 1200x800 and a portrait can be 800x1200.
I need the images to resize responsive and work for both horizontal and vertical images.
It needs to work for all modern browsers, ios, android and also IE11.
you'll see I've added "max-width: 1200px;" to lightbox-content, which does the trick for horizontal images... but since a vertical image is 800 wide, it enlarges and the height exceeds.
<div class="lightbox">
<span class="close" onclick="closeLightbox()">×</span>
<div class="lightboxTitle">My Title</div>
<div class="lightbox-content">
<div class="slide"><img src="img1.jpg"></div>
<div class="slide"><img src="img2.jpg"></div>
<div class="slide"><img src="img2.jpg"></div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
/* The Modal (background) */
.lightbox {
display: none;
position: fixed;
z-index: 99999999;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
/* Modal Content */
.lightbox-content {
position: relative;
margin: auto;
padding: 0;
width: 100%;
max-width: 1200px;
}
.lightboxTitle {
position: absolute;
top: 20px;
left: 25px;
font-size: 20px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #FF8511;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.slide {
display: none;
}
.slide img {
width: 100%;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
color: #FF8511;
}
I had the same issue in one of my past projects. I solved it with this js library https://imagesloaded.desandro.com/,
It allows you to process the images after they are loaded, and you can then assign a css class to it according to the aspect ratio.
$('#container').imagesLoaded( function() {
// images have loaded
// check image height/width > 1, portrait
// check image heidht/width <= 1, square or landscape
// assign different classes for each case to handle
});
css:
.img-container {
//do whatever you need on the container
}
// keep the image classes like this
.img-container img.portrait {
height: 100%;
width: auto;
}
.img-container img.landscape {
width: 100%;
height: auto;
}

CSS modal backfall doesn't take up entire screen

I want the background of my modal in CSS to take up the entire screen (i.e. whole screen gets shadowed over except for the modal content itself). I think this may have to do with me giving other divs widths and heights based on vh and vw. Here's My Code:
#modal {
z-index: 1;
position: fixed;
left: 40%;
right: 30%;
top: 10%;
background-color: rgba(0, 0, 0, 0.4);
width: 100vw;
height: 100vh;
}
#modal button {
height: 40px;
font: Hind Siliguri;
font-weight: bold;
border: 2px solid white;
border-radius: 5px;
margin: 5px;
}
<span id="modal">
<h2>Choose a word: </h2>
<button id = "choice1">Word1</button><button id= "choice2">Word2</button><button id = "choice3">Word3</button>
</span>
Here are other elements I assigned dimensions based on vw/vh:
#verbal-hint-container{
margin-right: 50%;
height: 30vh;
width: 40vw;
background-color: #C3D898;
border: 5px solid #160F29;
border-radius: 2px;
}
verbal-hint-container is just a div that contains instantiated messages (from mustache library).
Is my hunch that assigning other elements dimensions based on vw/vh interferes with making an element span the entire screen right? Is there a workaround for this? If it matters, my css+html for my modal occurs later in those files than my css+html for all other elements.
On #modal the height and width are using = instead of : thats why its not working properly. Change your #modal CSS to this:
#modal {
z-index: 1;
position: fixed;
left: 40%;
right: 30%;
top: 10%;
display: none;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
width: 100vw;
height: 100vh;
}
left, right, and top on #modal are not necessary if your goal is to cover up the whole screen. This will only cause the modal to be placed at the wrong position.
Not really sure what you want to achieve here but I would suggest to remove / comment out the display: none first while debugging / creating new component / block
Using Inspect element provides us with a way to find the classes in use by bootstrap.
Try adding the following CSS to your page:
.reveal-modal-bg {
width: auto !important;
position: fixed;
background: rgba(0, 0, 0, 0.45);
display: none;
left: 0;
right: 0;
top: 0;
bottom:0;
z-index: 40;
}
Adding this code should ensure that the background is fully covering the entire page.
I don't know if I'm getting your question right.
But here's an example where the modal background occupies 100% of the screen.
I hope this will help you.
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Modal Example</h2>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>