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.
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 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>
I have a simple webpage hosted on Heroku. There are 4 images which get resized to 0x0 automatically while it shows up perfectly fine on localhost. I can't figure out what's going wrong.
What it looks like on localhost
What it looks like on heroku
The grey background is because the next section has that background which means the image's size is 0x0.
To verify, I inspected the source code through developer tools.
<div class="section2">
<div class="heading">POWERED BY</div>
<div class="logos">
<a href="https://www.jamboreeindia.com/">
<div class="sponsor-logo">
<img src="jamboree3.png" class="overlay-logo">
<img src="jamboree.png" class="original-logo">
</div>
</a>
<a href="http://www.megalogix.org/">
<div class="sponsor-logo">
<img src="mcs2.png" class="overlay-logo">
<img src="mcs.png" class="original-logo">
</div>
</a>
</div>
</div>
CSS
.section2{
width: 100vw;
padding: 5px 0 0 0;
}
.heading{
text-align: center;
font-weight: 700;
color: #9FACCC;
}
.heading2{
text-align: center;
font-weight: 700;
color: #333;
font-size: 35px;
}
.logos{
width: 100vw;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.sponsor-logo img{
width: 150px;
height: auto;
margin: 50px;
}
.original-logo {
z-index: 1;
opacity: 0;
transition: all .3s ease;
}
.overlay-logo {
position: absolute;
z-index: 3;
transition: all .3s ease;
}
.overlay-logo:hover {
opacity: 0;
transition: all .3s ease;
}
.overlay-logo:hover + .original-logo {
opacity: 1;
transition: all .3s ease;
}
Thanks!
I found out why, disable your Adblocker on that site, it's blocking the images and injecting a style to the "sponsor-logo" class
{
display: none!important;
}
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>
I want:
block
block1 block2 block2
where
block ="head"
block1="h1"
block2="search box"
block3="itembox"
I want to put them in side by side..
I have tried below code in jsfiddle:
jsfiddle
but here these blocks not coming in same line.
don't use head tag use header for that
try this
#search {
display: inline-block;
}
http://jsfiddle.net/dm8044a8/2/
The element can include a title for the document, scripts, styles, meta information, and more.Head is not used inside inside BODY.
Use header instead tag.
I don't understand <itembox> tag. Are u using any framework?. I think you want some thing like this. Please change the width value as per your requirement.
header {
background: #fff;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 2px solid #7e7e7e;
z-index: 100;
display:flex;
}
header h1{
color: #ff0;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
text-align:center;
flex-direction: column;
}
#search {
float: left;
width: auto;
height: 40px;
flex-direction: column;
}
.itembox {
float: left;
background:green;
flex-direction: column;
}
#search input {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7F7F7F;
float: left;
font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
height: 20px;
margin: 0;
padding: 10px;
transition: background 0.3s ease-in-out 0s;
width: 300px;
}
#search button {
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 40px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 40px;
border: 2px solid #fff;
}
#search button:hover {
background-color:#000;
}
<header>
<h1>news </h1>
<div id="search">
<form method="post" id="search" action="#">
<input type="text" class="search" value="Type and hit enter" onblur="if(this.value == '') { this.value = 'Type and hit enter'; }" onfocus="if(this.value == 'Type and hit enter') { this.value = ''; }" name="s">
<button type="submit" style="display:inline-block;">Submit</button>
</form>
<div class="itembox">Item box</div>
</div>
</header>