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>
Related
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>
This question already has answers here:
Pop Up HTML Image when clicked
(2 answers)
Closed 2 years ago.
i have a very static landing page. but in this page there's a button when someone clicks it. it should open a popup image , very simple popup image. can this be happen? and what will be the code for html?
please guide
Code from W3Schools
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded";
captionText.innerHTML = "StackOverflow";
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* 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.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<button id="myImg" style="width:100%;max-width:300px">Click Me</button>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01" src="https://www.debuggr.io/static/3a4bfeeaa7a69e6aa9f4ba6ae4218622/af144/cover.png">
<div id="caption"></div>
</div>
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;
}
Please Some one Tell me how do i make this Modal Responsive.
This is the Html code For the Modal and its Content.
<div class="modal-content">
<span class="close">×</span>
<br/>
<div class = "modal_img">
<img id = "modal_pic" src="resources/images/round/aqua.jpg">
</div>
<div class = "modal_desc">
<h3>PRODUCT DESCRIPTION</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="colors">
</div>
</div>
And This is the CSS for The Modal Element and its Content.
Can Someone please tell me how do I alter these to make it Responsive
Thank You Very Much for your help:
/* 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: red;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal_img{
margin:20px 40px;
width: 25%;
height: 430px;
display: inline-block;
}
#modal_pic{
margin:auto;
width: 100%;
height: 100%;
border: solid black;
}
.modal_desc{
width: 30%;
float: right;
margin-top: 20px;
margin-right: 20%;
display: inline-block;
}
How do I make it Responsive.
In your css document use some of these:
#media all and (max-width: 900px) {
.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 */
}
Also use firefox (F12) has a nice Responsive Design view so you can test out your website easier
with the #media tags you have to think what it will look like on a mobile first and then use the #media tags to change how the site looks for bigger desplay devices
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>