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>
Related
I have a fairly simple page with a couple divs designed to be pop ups...
I'm having an issue with the .close div located in a jQuery populated popup. A btn is clicked .. jquery brings up a div and then populates it with content from another div.
This all works as expected.
There's a .close div in the popups designed to be, well a close button.
$('body, .close').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});
This works perfectly when the .close div is hard coded into the popup itself.. but it will not function in the when content is populated from somewhere else.
Can anyone shed some light on what I'm missing please?
// included so snippet functions....
var cards = $(".smpl");
cards.each(function(i) {
var im = $(this).attr('data-im');
var fadeTime = 180;
$(this).css('background-image', 'url(_core/img/p/' + im + ')')
$(this).delay(fadeTime * i).fadeIn(fadeTime);
});
// loaded #info with content from other divs
$('.about, .cont').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var wht = $(this).attr('data-t');
$('#info').removeClass('pop').html(''); //empty's info popup if its present
$('#pup').hide(); //hides other popup if its present
$('#cov').fadeIn(300);
$('#info').addClass('pop').html($(wht).html()).fadeIn(300);
console.log(wht);
});
// Should close all popups - FAIL for the #info .close div
// ###### this is where something is not right or borken...
$('body, .close').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});
$('#info').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#pup').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
//This opens #pup div
$('.sp, .ai, .ot').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var imgsrc = $(this).attr('data-im');
var longDes = $(this).children('.dspt').attr('data-ld');
$('#cov').fadeIn(300);
$('#pup').addClass('pop');
$('#pup h1').html(longDes);
$('#pup').css('background-image', 'url(_core/img/p/' + imgsrc + ')').fadeIn(300);
});
.nav {
position: absolute;
right: 30px;
top: 20px;
list-style: none;
z-index: 9997;
}
.nav a:link,
.nav a:visited {
display: block;
transition: all 0.5s;
font-size: 13px;
line-height: 22px;
width: 76px;
text-transform: uppercase;
background: #07e;
color: #fff;
padding: 2px 5px;
border-radius: 3px;
height: 25px;
position: relative;
right: 20px;
cursor: pointer;
margin: 5px 0;
text-align: center;
box-shadow: 0 -2px 0 #fff;
}
.smpl {
overflow: hidden;
position: relative;
float: left;
border: 1px solid #aaa;
padding: 0;
display: none;
width: 100%;
max-width: calc((100% - 60px) / 10);
height: auto;
margin: 5px 5px 0 0;
background-size: cover;
background: #aaa;
}
h1.dspt {
position: absolute;
bottom: -50px;
width: 100%;
background: #2d2d2d;
color: #fff;
text-transform: none;
padding: 5px;
opacity: 0;
transition: all .5s;
}
.smpl:hover h1.dspt {
bottom: 0;
transition: all .5s;
background: #07e;
opacity: 0.8;
}
#over,
#cov {
width: 100%;
height: 100%;
background: #aaa;
display: none;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 9991;
opacity: 0.8;
}
#cov {
background: #fffs;
opacity: 0.9;
}
#pup,
#info {
width: 150px;
height: 150px;
background-color: #fff;
display: none;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translate(0, -50%);
z-index: 9998;
opacity: 1;
margin: 0 auto;
border: 1px solid #aaa;
box-shadow: 0 5px 50px #666;
overflow: hidden;
display: none;
}
#pup h1.dspt {
position: absolute;
bottom: -50px;
width: 100%;
background: #2d2d2d;
color: #fff;
text-transform: none;
font-size: 16px;
padding: 15px 40px;
opacity: 0;
transition: all .5s;
text-align: left;
text-shadow: 2px 0 1px #000;
}
#pup:hover h1.dspt {
bottom: 0;
transition: all .5s;
background: #2d2d2d;
opacity: 0.8;
}
#info {
padding: 10px;
overflow-Y: auto;
border: 3px solid #333;
border-radius: 6px;
}
.pop .close {
position: absolute;
top: -40px;
right: -40px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #333;
color: #fff;
opacity: .5;
font-weight: bold;
text-align: center;
font-size: 16px;
line-height: 30px;
transition: all .5s;
cursor: pointer;
}
.pop:hover .close {
top: 10px;
right: 10px;
transition: all .5s;
background: #2d2d2d;
opacity: 0.8;
z-index: 9999;
}
#about,
#cont {
display: none;
background: #fff;
padding: 10px;
position: relative;
text-align: left;
margin: 10px 0 0 0;
border: 1px solid #ddd;
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cov"></div>
<div id="info"></div>
<div id="pup">
<h1 class="dspt"></h1>
<div class="close">X</div>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 medium-12 cell masthead">
<div class="base">
<ul class="nav">
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
<div class="large-12 medium-12 cell" id="content">
<div id="about">
<div class="close">X</div>
<h4>about - Info Div</h4>
<p>Hover to see close btn, but it fails to function.
<p>
</div>
<div id="cont">
<div class="close">X</div>
<p>Contact - Info div</p>
<p>Hover to see close btn, but it fails to function.
<p>
</div>
<div class="grid-x grid-padding-x">
<div class="large-12 medium-12 cell inner">
<div class="smpl sp" data-im="h1pc_15px.png">
<div class="zm"></div>
<h1 class="dspt" data-ld="#pup div">Pup Div</h1>
<img alt="H" src="_core/img/p/_blank.png"></div>
</div>
</div>
</div>
</div>
<!-- // grid padding -->
</div>
<!-- //grid container -->
Snippet Above ..
If you click the [broken] image
the #pup popup shows
clicking outside #pup(grey area) removes the popup (- GOOD)
clicking the .close div removes the popup (- GOOD).
Click "about" or "contact" in the header
the #info popup shows
clicking outside that popup (grey area) closes it (- GOOD)
clicking the .close div simply won't trigger the close event (- FAIL).
Suggested that it was due to the click event on body and stopPropagation... So I tested...
$('.about, .cont').on('click', function (e) {
e.preventDefault();
//e.stopPropagation();
var wht = $(this).attr('data-t');
$('#info').removeClass('pop').html(''); //empty's info popup if its present
$('#pup').hide(); //hides other popup if its present
$('#cov').fadeIn(300);
$('#info').addClass('pop').html($(wht).html()).fadeIn(300);
console.log(wht);
});
$('#cov, .close').on('click', function(e) {
e.preventDefault();
//e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});
Issue remains.
It works if you change the click function to: $(document).on('click', 'body', '.close', function()
You also need to remove this bit:
$('#info').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#pup').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
I have a modal popup in view, which displays some text once i click the open modal button, however when the button is clicked, the page gets greyed out but no popup shows, i'm not sure why that is happening as im new to VUE. Any help would be highly appreciated.
The code for the view page is below.
<template>
<div>
<transition name="modal">
<div v-if="isOpen">
<div class="overlay" #click.self="isOpen = false;">
<div class="modal">
<h1>Modal heading</h1>
<p>This my first modal using vue.js</p>
</div>
</div>
</div>
</transition>
<button #click="isOpen = !isOpen;">
{{ isOpen ? "Close" : "Open" }} modal
</button>
</div>
</template>
<script>
export default {
data: function() {
return {
isOpen: false
};
}
};
</script>
<style scoped>
.modal {
width: 500px;
margin: 0px auto;
padding: 20px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px 3px;
transition: all 0.2s ease-in;
font-family: Helvetica, Arial, sans-serif;
}
.fadeIn-enter {
opacity: 0;
}
.fadeIn-leave-active {
opacity: 0;
transition: all 0.2s step-end;
}
.fadeIn-enter .modal,
.fadeIn-leave-active.modal {
transform: scale(1.1);
}
button {
padding: 7px;
margin-top: 10px;
background-color: green;
color: white;
font-size: 1.1rem;
}
.overlay {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #00000094;
z-index: 999;
transition: opacity 0.2s ease;
}
</style>
Your overlay has a high z-imdex. It thus overlays your modal content, too. Add position relative and z-imdex higher than 999 to . modal and it should work.
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 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>
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>