Develop Reference

How to add/remove animations on mobile devices? html/css

Is there a way that uses media queries and you can delete the animation for the mobile device but keep the animation for other devices like desktop, or laptop? The same also applies with if you want to add an animation for mobile but not have it on any other device such as laptop or computer. Can you use media queries for this?
For example:
I want to add this animation only on mobile devices
function show() {
setTimeout(
function() {
document.getElementById('discord-shoutout').classList.add('online');
},
200
);
}
function reset() {
hide();
setTimeout(show, 1500);
}
function hide() {
document.getElementById('discord-shoutout').classList.remove('online');
}
show();
html,
body {
background: #e9e9e9;
width: 100%;
height: 100%;
text-align: center;
line-height: 1.1;
}
.reset-button {
font: 400 11px "Open Sans";
line-height: 1;
background: transparent;
border-radius: 10px;
border: 2px solid #7289da;
color: #7289da;
font-size: 1em;
padding: 0.5em 0.8em;
cursor: pointer;
}
.reset-button:hover {
background: #7289da;
color: #fff;
}
.discord-shoutout * {
font-family: "Open Sans", sans-serif;
box-sizing: border-box;
}
.discord-shoutout {
position: fixed;
bottom: 2em;
right: 1em;
width: 300px;
z-index: 100;
text-align: left;
transition: 1s ease;
visibility: hidden;
opacity: 0;
transform: translate(1em, 50px);
filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
}
.discord-shoutout:hover {
filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.25));
}
.discord-shoutout.online {
opacity: 1;
transform: translate(0, 0);
visibility: visible;
}
.discord-shoutout:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent #7289da transparent transparent;
position: absolute;
right: 0;
bottom: -25px;
}
.discord-shoutout .shoutout-inner {
color: #fff;
padding: 1em 1.5em 1.5em;
transition: box-shadow 0.3s ease;
background: transparent;
border-radius: 1em/1em;
overflow: hidden;
position: relative;
}
.discord-shoutout .shoutout-inner:after, .discord-shoutout .shoutout-inner:before {
content: "";
border-width: 0;
position: absolute;
box-sizing: border-box;
width: 100%;
background-color: #7289da;
z-index: -1;
}
.discord-shoutout .shoutout-inner:after {
height: 200%;
top: 0;
left: -46px;
transform: rotate(-18deg);
}
.discord-shoutout .shoutout-inner:before {
height: calc(100% - 25px);
right: 0;
top: 0;
}
.discord-shoutout .title {
display: block;
font-size: 1.2em;
margin: 0 0 1em 0;
}
.discord-shoutout p {
font-size: 0.9em;
font-weight: 300;
margin: 0 0 0.6em 0;
}
.discord-shoutout .discord-buttons {
margin-top: 1.4em;
}
.discord-shoutout .discord-button {
padding: 0.6em 1em;
color: white;
text-decoration: none;
background: transparent;
border: 0;
font-size: 0.9em;
cursor: pointer;
}
.discord-shoutout .discord-button.discord-primary {
border: 2px solid #fff;
border-radius: 6px;
}
.discord-shoutout .discord-button.discord-primary:hover {
background: #fff;
color: #7289da;
}
.discord-shoutout .discord-button.discord-secondary {
color: #fff;
}
.discord-shoutout .discord-button.discord-secondary:hover {
text-decoration: underline;
}
.discord-shoutout img {
position: absolute;
right: 1em;
top: 1em;
height: 1.4em;
}
<button class="reset-button" onclick="reset()">reset</button>
<div id="discord-shoutout" class="discord-shoutout">
<div class="shoutout-inner">
<img src="https://discordapp.com/assets/93608abbd20d90c13004925014a9fd01.svg">
<span class="title">Hey there!</span>
<p>
Fancy having a chat?
</p>
<p>
We're currently online on Discord!
</p>
<div class="discord-buttons">
<a class="discord-button discord-primary" href="https://discord.gg/2nrFVCp" target="_blank">Join our server</a>
<button class="discord-button discord-secondary" onclick="hide()">Close</button>
</div>
</div>
</div>
Is there a way to add the above animation only for mobile devices? using either media queries or any other method?

I can think of two ways of doing it. One with media queries and another with javascript. I prefer the media query way. In below code the animation will only work on screen sizes less than 600px. That is it will only work on mobile devices.
Media query way:
You can add the css which toggles the animation inside a media query
CSS:
html,
body {
background: #e9e9e9;
width: 100%;
height: 100%;
text-align: center;
line-height: 1.1;
}
.reset-button {
font: 400 11px "Open Sans";
line-height: 1;
background: transparent;
border-radius: 10px;
border: 2px solid #7289da;
color: #7289da;
font-size: 1em;
padding: 0.5em 0.8em;
cursor: pointer;
}
.reset-button:hover {
background: #7289da;
color: #fff;
}
.discord-shoutout * {
font-family: "Open Sans", sans-serif;
box-sizing: border-box;
}
.discord-shoutout {
position: fixed;
bottom: 2em;
right: 1em;
width: 300px;
z-index: 100;
text-align: left;
transition: 1s ease;
visibility: hidden;
opacity: 0;
transform: translate(1em, 50px);
filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
}
.discord-shoutout:hover {
filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.25));
}
.discord-shoutout:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent #7289da transparent transparent;
position: absolute;
right: 0;
bottom: -25px;
}
.discord-shoutout .shoutout-inner {
color: #fff;
padding: 1em 1.5em 1.5em;
transition: box-shadow 0.3s ease;
background: transparent;
border-radius: 1em/1em;
overflow: hidden;
position: relative;
}
.discord-shoutout .shoutout-inner:after, .discord-shoutout .shoutout-inner:before {
content: "";
border-width: 0;
position: absolute;
box-sizing: border-box;
width: 100%;
background-color: #7289da;
z-index: -1;
}
.discord-shoutout .shoutout-inner:after {
height: 200%;
top: 0;
left: -46px;
transform: rotate(-18deg);
}
.discord-shoutout .shoutout-inner:before {
height: calc(100% - 25px);
right: 0;
top: 0;
}
.discord-shoutout .title {
display: block;
font-size: 1.2em;
margin: 0 0 1em 0;
}
.discord-shoutout p {
font-size: 0.9em;
font-weight: 300;
margin: 0 0 0.6em 0;
}
.discord-shoutout .discord-buttons {
margin-top: 1.4em;
}
.discord-shoutout .discord-button {
padding: 0.6em 1em;
color: white;
text-decoration: none;
background: transparent;
border: 0;
font-size: 0.9em;
cursor: pointer;
}
.discord-shoutout .discord-button.discord-primary {
border: 2px solid #fff;
border-radius: 6px;
}
.discord-shoutout .discord-button.discord-primary:hover {
background: #fff;
color: #7289da;
}
.discord-shoutout .discord-button.discord-secondary {
color: #fff;
}
.discord-shoutout .discord-button.discord-secondary:hover {
text-decoration: underline;
}
.discord-shoutout img {
position: absolute;
right: 1em;
top: 1em;
height: 1.4em;
}
#media only screen and (max-width: 600px) {
.discord-shoutout.online {
opacity: 1;
transform: translate(0, 0);
visibility: visible;
}
}
Javascript way: You can also check window width in js and toggle the animation class accordingly.
JS:
function show() {
if(window.innerWidth < 600){
setTimeout(
function() {
document.getElementById('discord-shoutout').classList.add('online');
},
200
);
}
}
function reset() {
hide();
setTimeout(show, 1500);
}
function hide() {
document.getElementById('discord-shoutout').classList.remove('online');
}
show();

you can use this for disable all animations on only mobiles devices you can ajust the media query size for your purposes....
#media screen and (max-width: 768px) {
*, *:before, *:after {
/*CSS transitions*/
transition-property: none !important;
/*CSS transforms*/
transform: none !important;
/*CSS animations*/
animation: none !important;
}

Properly use the show element onclick

I have 3 css buttons, 1 on top of the post and 2 on bottom. I want to keep the bottom buttons hidden. If a user clicks on the top button he will be navigated to the bottom button and bottom button will become visible. But cant seem to make it work as expected.
Here's what I tried...
function showbtn() {
var x = document.getElementById("btn");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
/* Awesome button css Start */
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-highlight-color: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn-blue {
background-color: #0abced;
}
.btn-blue:hover {
background-color: #fff;
color: #0abced !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn-blue:before,.btn-blue:after {
background: #0abced;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
/* Awesome button css End */
<div class="btn-margin"><a class="btn btn-green" href="#btn" onclick="showbtn()">
Click Here To See
</a></div>
<br>
<br>
................Content................
<br>
<br>
<div id="btn">
<div class="btn-margin"><a class="btn btn-green" href="https://examplelink.com">
Click Here To See 1
</a></div>
<div class="btn-margin"><a class="btn btn-green" href="https://examplelink.com">
Click Here To See 2
</a></div>
</div>
Internal linking seems to work. But showing/hiding element isn't working for some reason. Any idea why?

You need to hide the second buttons group by default using display:none and just show it on click.
function showbtn() {
var x = document.getElementById("btn");
x.style.display = "block";
}
/* Awesome button css Start */
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-highlight-color: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn-blue {
background-color: #0abced;
}
.btn-blue:hover {
background-color: #fff;
color: #0abced !important;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,
.btn-green:after {
background: #1AAB8A;
}
.btn-blue:before,
.btn-blue:after {
background: #0abced;
}
.btn:hover:before,
.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
#btn {
display: none;
}
/* Awesome button css End */
<div class="btn-margin"><a class="btn btn-green" href="#btn" onclick="showbtn()">
Click Here To See
</a></div>
<br>
<br> ................Content................
<br>
<br>
<div id="btn">
<div class="btn-margin"><a class="btn btn-green" href="https://examplelink.com">
Click Here To See 1
</a></div>
<div class="btn-margin"><a class="btn btn-green" href="https://examplelink.com">
Click Here To See 2
</a></div>
</div>

How can I grey out page except for one element?

How can I make a greyed out overlay on a page, but have one element in that page not greyed out?
There are many questions like this asked but none of them work:
Hide all elements except one div for print view - This one does not work for my situation as I do not want to hide everything.
Disable everything except a DIV element - This one the second answer seems similar to mine. But even if I change z-index of my desired ungreyed out element the whole page stays greyed out. Also, I found no difference between using div and iframe.
Want to make the whole page in grayscale except specified div - This one just makes everything else greyscale but I do not want that.
From the example below I want everything greyed out except for <input class="edit-title" value="Site Title">. Right now my code greys out most of the page, I can grey out the whole page if I change
.overlay {
z-index: -1;
}
to
.overlay {
z-index: 0;
}
Is there a way to grey out everything except <input class="edit-title" value="Site Title">?
html {
box-sizing: border-box;
}
.overlay {
top: 0;
bottom: 0;
right: 0;
left: 0;
position: absolute;
background: rgba(0, 0, 0, .4);
z-index: -1;
}
edit-title {
z-index: 100;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body,
input,
optgroup,
select,
textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
body {
font-size: 13px;
line-height: 1.4;
color: #555;
margin: 0;
padding: 0;
background: white;
overflow-x: hidden;
}
.button {
font-weight: bold;
color: #fff;
border: 1px solid #44aa76;
border-width: 0 0 3px 0;
background-color: #66cc98;
padding: 5px;
border-radius: 6px;
text-align: center;
}
.button:focus,
.button:hover,
.active {
cursor: pointer;
background-color: #44aa76;
color: #fff;
outline: none;
}
header {
width: 100%;
border-bottom: 1px solid #eee;
display: flex;
justify-content: center;
padding: 30px 0 10px;
margin-bottom: 10px;
}
input {
font-size: 13px;
border: 1px solid #eee;
border-radius: 4px;
padding: 8px;
}
input:focus {
outline: none;
border-color: #ddd;
}
[type="search"] {
-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.search {
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.search input[type="search"] {
width: 100%;
}
label {
font-size: 13px;
margin-right: 5px;
}
.save-button {
width: 30px;
height: 30px;
line-height: 27px;
padding: 0;
margin: 0 10px;
}
h1 {
margin: 0;
padding: 0;
line-height: 1;
font-size: 22px;
padding: 4px 0;
}
.container {
position: relative;
padding: 0 15px;
width: 360px;
max-width: 100%;
margin: 0;
}
.reading-list {
margin-bottom: 15px;
}
.reading-item {
border-radius: 3px;
padding: 0;
margin: 10px 0 0 0;
background-color: #f7f7f7;
position: relative;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.05);
transition: all 0.5s ease 0s;
}
.reading-item .item-link {
text-decoration: none;
display: block;
width: 100%;
color: #555;
padding: 10px 50px 10px 56px;
min-height: 56px;
}
.reading-item .item-link:focus,
.reading-item .item-link:hover {
color: #66cc98;
background-color: #fff;
}
.reading-item .item-link span {
display: block;
}
.reading-item .item-link span.title {
font-weight: bold;
}
.reading-item .favicon {
position: absolute;
top: 10px;
left: 10px;
width: 36px;
height: 36px;
border-radius: 4px;
border: 1px solid #ccc;
padding: 1px;
}
.reading-item .item-link:hover .favicon {
border-color: #66cc98;
}
.reading-item .delete-button {
position: absolute;
top: 5px;
right: 5px;
border-radius: 100%;
padding: 0;
width: 20px;
height: 20px;
border: 0;
background-color: transparent;
color: #ccc;
transform: rotateZ(0) scale(1);
transition: transform 0.3s ease, box-shadow 0.5s ease;
}
.reading-item .edit-button,
.reading-item .save-button {
position: absolute;
bottom: 10px;
right: 10px;
padding: 0;
width: 10px;
height: 10px;
border: 0;
background-color: transparent;
color: #ccc;
border-radius: 0;
margin: 0;
}
.reading-item .delete-button:hover {
background-color: #ccc;
color: #fff;
transform: rotateZ(90deg) scale(2);
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
}
<body class="popup-page">
<div class="container">
<header>
<h1 data-localize="appName">Reading List</h1>
<button class="button save-button" id="savepage">+</button>
</header>
<div class="search">
<label for="my-search" data-localize="search">Search</label>
<input type="search" id="my-search" name="search" autocomplete="off">
</div>
<div class="reading-list" id="reading-list">
<div class="reading-item read">
<a value="www.example.com" class="button delete-button">×</a>
<a class="item-link" href="www.example.com" alt="Reading List">
<input class="edit-title" value="Site Title">
<span class="host">example.com</span>
</a>
<img src="/icons/save.svg" class="button save-button"></div>
</div>
</div>
<div class="overlay" id="overlay"></div>
</body>
https://jsfiddle.net/qyca9489/

Can do it using css box-shadow.
.box{display:inline-block; width:100px; height:100px; margin-top:50px; text-align:center; padding-top:2em}
.box.selected{
box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5);
}
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box selected">Box 3</div>
<div class="box">Box 4</div>
Alternate solution using 4 overlay elements
Overlays are positioned based on highlighted element position and dimensions.
The top and bottom overlays are 100% width. The top one just needs it's height set to value of top offset of highlighted element. Bottom one gets it's top set to bottom of the element.
Right and left are same height as highlighted element and reach to each edge of page to fill holes between the top and bottom overlays
var $el = $('.box.selected'),
$oLay = $('.overlay'),
elPos = $el.offset(),// coordinates of element within document
elH = $el.height(),
elW = $el.width();
$oLay.filter('.top').height(elPos.top);
$oLay.filter('.left').css({
top: elPos.top,
height: elH,
width: elPos.left
});
$oLay.filter('.right').css({
top: elPos.top,
height: elH,
left: elPos.left + elW
});
$oLay.filter('.bottom').css({
top: elPos.top + elH
});
.box {
display: inline-block;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
padding-top: 2em
}
.overlay {
position: absolute;
background: rgba(0, 0, 0, .5);
z-index: 100
}
.overlay.top {
top: 0;
left: 0;
width: 100%
}
.overlay.left {
left: 0
}
.overlay.right {
right: 0
}
.overlay.bottom {
width: 100%;
left: 0;
bottom: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box selected">Box 3</div>
<div class="box">Box 4</div>
<div class="overlay top"></div>
<div class="overlay left"></div>
<div class="overlay right"></div>
<div class="overlay bottom"></div>

You could put a second overlay inside <a class="item-link" href="www.example.com" alt="Reading List">. So:
<a class="item-link" href="www.example.com">
<div class="overlay"></div>
…
</a>
And in the CSS:
.item-link {
position: relative
}

How do I close custom popover when click outside?

I'm developing a Cordova app. For that I'm using Vue.js and jQuery for bindings and script and I'm developing UI on my own. I could do page transitions and animations for most of the UI like, Radio buttons and check boxes etc. But I could not be able to develop a custom popover. I have tried following code.
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>
This works fine for toggling popover on button click. I tried so much. But I could not hide the popover when click on outside of the popover.
How can I hide popover when clicking out side of it?

Please try this. I have added jQuery
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function(e) {
e.stopPropagation();
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>

Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
$(el).closest('.ui-page').find('.drawer').toggleClass('active');
});
$('body').on('click', $(el).closest('.ui-page'), function(e) {
var $drawer = $(el).closest('.ui-page').find('.drawer');
var $target = $(e.target);
if ($target.closest($(el)).length <= 0
&& $drawer.hasClass('active')
&& $target.closest('.drawer').length <= 0) {
$drawer.removeClass('active');
}
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>

Modal Window with scroll bar

So, I have a modal window in a website that I'm devloping.
The modal is made out of pure CSS, to open it and close it I have javascript functions wich change the css elements to make the modal show/hide.
CSS of the modal:
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog > div {
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background:white;
display: table;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.btnEncomendarProduto {
background-color:#D60E12;
color:white;
border-radius:5px;
font-size: 12px;
white-space:normal;
cursor:pointer;
text-transform: initial;
border:1px solid #D60E12;
margin-top:3px;
}
</style>
So the problem is when I have a something that displays too much information on the modal, this happens:
So I think I need a scroll bar on the div inside the modal. How can I do that?
Thank you.

If you have an inner div that expands with the content of the actual modal, you can set the max-height of that div to be something--like 75vh--and add overflow-y: auto to that container, and it will automatically add a scrollbar when the content gets longer than that set max-height.
HTML
<div class="Content">
<p>
This is the page contents.
</p>
</div>
<div class="Modal" id="modal">
<div class="Contents">
<h1>Modal</h1>
<p id="text-area">
[large amounts of content]
</p>
</div>
</div>
CSS
body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.Content
{
position: relative;
width: 100%;
}
.Modal
{
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3); // light grey background
}
.Modal.Open
{
display: block;
}
.Modal .Contents
{
overflow-y: auto;
display: block;
position: relative;
width: 90%;
margin: 5% auto 0;
max-height: 90vh;
padding: 5px;
background: #fff;
}
Note the .Modal .Contents selector and how it works.
JSFiddle Example: https://jsfiddle.net/nj6r0sjw/