I want a button to trigger a popup. The pop shows when the button is clicked but it happens really abruptly so I want to add a transition but it doesn't seem to work.
HTML:
<button class="terug"></button>
CSS:
img.popup{
width: 15em;
position: absolute;
top: 25em;
left: 4em;
transition: ease-in 1s;
}
JS:
var uno = document.querySelector('button.terug');
var popup = document.querySelector('img.popup');
uno.addEventListener ('click', function(){
popup.classList.toggle('popup');
});
Maybe :
var popup = document.querySelector('img');
Instead of :
var popup = document.querySelector('img.popup');
Here's an way you could do it using pure JavaScript. Although I would recommend you use a third library or a Jquery plugin.
const openPopup = () => {
const popup = document.getElementById("popup");
popup.classList.add("opened");
}
.image-popup {
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 200px);
opacity: 0;
transition: all 1s ease-in-out;
height: 0;
overflow: hidden;
}
.image-popup.opened {
opacity: 1;
height: auto;
}
<button onclick="openPopup()">Open image</button>
<div id="popup" class="image-popup">
<img src="https://placeimg.com/400/400/any">
</div>
Related
I have a sticky element I've setup for a button on mobile devices. This is the code:
.sticky-btn {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
Works great but I don't want the button to show when the user is at the very top of the page. It would be perfect if it only appeared after you scrolled down say 20-30 pixels. Is it possible to accomplish this in CSS somehow?
Thanks!
Brian Preston. Unfortunately, we can't do this using only CSS. We should Javascript to add "sticky" class to sticky button and toggle button using that class.
.sticky-btn {
position: fixed;
bottom: 20px;
left: 50%;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%);
transition: all .3s ease-in-out;
}
.sticky-btn.sticky {
opacity: 1;
visibility: visible;
pointer-events: all;
}
And JS code should be like this.
document.addEventListener('DOMContentLoaded', function () {
var scrollPosition = window.scrollY;
var stickyBtn = document.querySelector('.sticky-btn');
window.addEventListener('scroll', function() {
scrollPosition = window.scrollY;
if (scrollPosition >= 30) {
stickyBtn.classList.add('sticky');
} else {
stickyBtn.classList.remove('sticky');
}
});
});
Hope this helps. Happy coding ~ :)
I have a modal which appears on the press of a button and is animated as it is displayed.
This works fine, BUT only if the modal code is already in the DOM when the button is pressed.
You can see the example here:
https://codesandbox.io/s/loving-dan-7fwrkr
This is the problem: if the button adds the modal code to the DOM then the modal simply appears with no animation.
I've spent many hours trying various ways to make this work and the best I can come up with is to use window.setTimeout to trigger the animation 200 milliseconds after the modal code is added to the DOM. I don't like such a solution because it seems like a hack - I don't have any clear understanding why such a hack would work.
The example below demonstrates both cases.
Without the commented code, the animation works.
With the commented code, the modal simply appears without animation.
If anyone has any idea how to fix this it would be much appreciated.
My specific goal is to NOT have the modal code in the DOM prior to pressing a button to make it appear.
I've worked pretty hard to make the minimum possible example below, but it is still fairly large I apologise. If you have suggesting for cutting it further whilst still being relevant please let me know.
import ReactDOM from 'react-dom';
import React, {useState} from 'react';
const theStyle = `
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
height: auto;
z-index: 2000;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(143, 27, 15, 0.8);
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #fff;
background: #e74c3c;
position: relative;
border-radius: 3px;
margin: 0 auto;
}
.md-content h3 {
opacity: 0.8;
}
.md-effect-1 .md-content {
transform: scale(0.7);
opacity: 0;
transition: all 0.3s;
}
.md-show.md-effect-1 .md-content {
transform: scale(1);
opacity: 1;
}
`
function App() {
const [getVisible, setVisible] = useState(false);
/*
THE MODAL APPEAR ANIMATION DOES NOT WORK WHEN THIS IS UNCOMMENTED
if (!getVisible) {
return (
<button onClick={() => setVisible(true)}>
show modal
</button>)
}
*/
return (
<>
<style>
{theStyle}
</style>
<div className={`md-modal md-effect-1 ${(getVisible) && "md-show"}`}>
<div className="md-content">
This is a modal window.<br/>
<button onClick={() => setVisible(false)} className="md-close">close</button>
</div>
</div>
<div onClick={() => setVisible(false)} className="md-overlay"/>
<button onClick={() => setVisible(true)} className="md-trigger">
show modal
</button>
</>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
I've had similar issues, the reason was that the transition does not trigger if the modal immediately gets the end value of being visible when you add it to the DOM.
I solved it by putting the transition into an #keyframes animation. Then, after adding the modal to the DOM, you use classList.add() to trigger the animation.
Something like this
.modal {
opacity:0
}
.animated {
animation: showModal 1s forwards easeOut
}
#keyframes showModal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
JS after the modal is added to the DOM:
myModel.classList.add("animated")
Self answer to my future self.
With the answer of #Kokodoko as my start point, I gained a better understanding of how animation works in CSS/JS and rewrote my modal entirely so it now does what I want.
Here's the code:
import ReactDOM from 'react-dom';
import React, {useState} from 'react';
const theStyle = `
.animated {
animation: showModal .2s forwards
}
#keyframes showModal {
from {
opacity: 0;
transform: scale(0.7);
}
to {
opacity: 1;
transform: scale(1);
}
}
.modalOverlay {
z-index: 1500;
background: rgba(40,91,218,0.5); /* you must use this and not opacity because opacity changes the front color */
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
}
.modalContainer {
z-index: 1600;
order: 0;
flex: 0 1 auto;
align-self: auto;
}
#modalContent {
z-index: 1700;
opacity: 0;
color: #fff;
width: 500px;
height: 200px;
background: #e74c3c;
position: relative;
border-radius: 3px;
margin: 0 auto;
}
`
function Button() {
const [getVisible, setVisible] = useState(false);
return (
<div>
<button onClick={() => setVisible(true)}>
show modal
</button>
{(getVisible) && <Modal setVisible={setVisible}/>}
</div>
)
}
function Modal({setVisible}) {
React.useEffect(
//() => window.setTimeout(document.getElementById("modalContent").classList.add("animated"))
() => document.getElementById("modalContent").classList.add("animated")
, [])
const handleClickOnOverlay = (e) => {
// clicks on the are sent through to the background so we must prevent that
e.stopPropagation()
setVisible(false)
}
const handleClickOnContainer = (e) => {
// clicks on the modal are sent through to the background so we must prevent that
e.stopPropagation()
}
const handleClickOnModal = (e) => {
console.log('clicked on modal')
}
return (
<>
<style>
{theStyle}
</style>
<div onClick={handleClickOnOverlay} className="modalOverlay">
<div className={`modalContainer`} onClick={handleClickOnContainer}>
<div id="modalContent" onClick={handleClickOnModal}>
This is a modal window.<br/>
<button onClick={() => setVisible(false)} className="md-close">close</button>
</div>
</div>
</div>
</>
);
}
ReactDOM.render(<Button/>, document.getElementById('root'));
I am building a chrome extension, when user click on the button I am loading a custom popup window from my content div
/contentScript.js
var contentDiv = `
<div id='mydiv-container'>
<div id="test"></div>
</div>`;
chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage (request, sender, sendResponse) {
$("body").append(contentDiv);
$('#mydiv-container').addClass('visible');
}
This works, problem is that I use a css transition that doesn't work
/content.css
#mydiv-container {
opacity: 0;
height: 390px;
width: 400px;
position: fixed;
top: -200px;
z-index: 999999999;
transition: all 2s;
}
#mydiv-container.visible {
opacity: 1;
top: 20px;
transition: all 2s;
}
This doesn't work as it expected, the transition is not taking place.
How can I fix this.
Use this Webkit is the property of CSS supported by google chrome
-webkit-transition: all 2s;
I have fixed that with the use of the setTimeout method.
setTimeout(function() {
$('#mydiv-container').addClass('visible');
});
using Webkit works for me and when i try to copy your code on a jsfiddle didnt work because the mydivcontainer was on top of the button so the button never triggers so i change the top: -200px; to top: -400px
https://jsfiddle.net/jvgx4ucj/1/
I have a large element that has multiple animated (rotating) images, and you can zoom in and out on the entire div (which changes its scale transform). However, if an image element is created while the div is zoomed out, when I zoom back in I can see that the image is very blurry, as if it the image was downscaled when the element was created. A possible workaround would be to hide & show the image every time I zoom, but that doesn't sound like the best solution.
Here's a snippet demonstrating the issue (fiddle). Click on the first link to get a blurred image (sometimes only breaks on the second click), and on the second link to get a good image.
$(".try-1").click(function() {
$(".image").remove();
$(".pos").css("transform", "scale(0.4)").append("<div class=\"image\"></div>");
setTimeout(() => {
$(".pos").css("transform", "scale(1.4)");
}, 500)
});
$(".try-2").click(function() {
$(".image").remove();
$(".pos").css("transform", "scale(1.4)").append("<div class=\"image\"></div>");
});
.clicky {
color: #00f;
cursor: pointer;
}
.clicky:hover {
text-decoration: underline;
}
.div {
position: relative;
width: 500px;
height: 500px;
background: #000;
}
.pos {
position: absolute;
left: 250px;
top: 250px;
}
#keyframes rotating-cw {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.image {
position: absolute;
left: -150px;
top: -150px;
width: 300px;
height: 300px;
background: url(http://i.imgur.com/grJ6I3k.png);
background-size: 300px 300px;
animation: rotating-cw 30s linear infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clicky try-1">Create & zoom in</span> | <span class="clicky try-2">Zoom in & create</span>
<div class="div">
<div class="pos">
</div>
</div>
use this:
.pos {
-webkit-perspective: 1000;
position: absolute;
left: 250px;
top: 250px;
}
This can be solved using requestAnimationFrame but a simpler and more straightforward solution is to tell the browser to again initialize the image's container
$(".try-1").click(function() {
$(".image").remove();
$(".pos").css("transform", "scale(0.4)").append("<div class=\"image\"></div>");
setTimeout(() => {
$(".pos").css("transform", "scale(1.4)");
// Here, after we scale up the element again append
// the .image element but first remove it
$(".image").remove();
$(".pos").append("<div class=\"image\"></div>");
}, 500)
});
JsFiddle
When I click the back button on the browser (the latest Firefox) after closing a popup on my dev site, the back button doesn't work, and the popup reopens, which causes a loop where the user can't use their back button.
I think it's either redirect (the # in the URL) or session related. But none of the cookie scripts seem to work. I'd like the popup to only open if the user clicks the button to open it.
Th site is currently offline. I'm just hard-coding it with a browser and a code editor at the moment.
I'm hoping someone can tell me what I'm missing. It's a pretty simple CSS popup. Here is the code for the popup:
/*Popup*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 50%;
position: relative;
transition: all 5s ease-in-out;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #08899e;
}
.popup .content {
max-height: 50%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<a class="button" href="#popup1" data-rel="back">Let me Pop up</a>. Add more text here...
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<h2>Title Goes Here...</h2>
<div class="content">
Text goes here....
</div>
</div>
</div>
Have you tried with this script?
if (window.location.hash) {
if (window.history && history.pushState) {
window.history.pushState("", document.title, window.location.pathname);
} else {
// Prevent scrolling by storing the page's current scroll offset
var scroll = {
top: document.body.scrollTop,
left: document.body.scrollLeft
};
window.location.hash = '';
// Restore the scroll offset, should be flicker free
document.body.scrollTop = scroll.top;
document.body.scrollLeft = scroll.left;
}
}
I also found anther article for you : [question] Close pop up on back button