how to add background image in behind slider? - javascript

I made a slider which when clicked will change the background. At the beginning of opening the page the background is white. How do I add a background image at the beginning of the page?
I want the first page to have a background image. If one of the features is clicked the background image will change:
after clicking the icon, the image that should have been replaced is not replaced, because I want the first time I open this page there is a background image and after clicking the icon the background image is replaced.
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 625px;
}
* {
box-sizing: border-box;
}
.slider {
width: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.center .slick-center h3 {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
}
.center h3 {
opacity: 0.8;
transition: all 300ms ease;
}
.hidden {
display: none;
}
.sg-feature img {
width: 100px;
height: 100px;
}
/* html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body{
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 625px;
}
* {
box-sizing: border-box;
}
.slider {
width: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.center .slick-center h3 {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
}
.center h3 {
opacity: 0.8;
transition: all 300ms ease;
}
.hidden{
display : none;
}
.hidden1{
display : none;
}
.hidden2{
display : none;
}
.hidden3{
display : none;
}
.hidden4{
display : none;
}
.hidden5{
display : none;
}
.hidden6{
display : none;
}
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/tes.css">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick-theme.css">
<title>Title</title>
</head>
<body>
<div>
<img src="image/b1.jpg" style="z-index: -1;">
<section class="background center slider variable-width variable-height ">
<div class="text-center sg-feature" data-bg="image/b1.jpg">
<img class="rounded mx-auto d-block" src="image/eat.png" />
<h3>Eat and Come</h3>
<br />
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b2.jpg">
<img class="rounded mx-auto d-block" src="image/grab.png" />
<h3>Grab</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b3.jpg">
<img class="rounded mx-auto d-block" src="image/experience.png" />
<h3>Experience</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b4.jpg">
<img class="rounded mx-auto d-block" src="image/Secret sale.png" />
<h3>Secret Sale</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b5.jpg">
<img class="rounded mx-auto d-block" src="image/sale.png" />
<h3>Hashtag Sale</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b6.jpg">
<img class="rounded mx-auto d-block" src="image/loyalty.png" />
<h3>Loyalty</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b7.jpg">
<img class="rounded mx-auto d-block" src="image/auction.png" />
<h3>Auction</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick-master/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 6,
speed: 300,
focusOnSelect: true,
variableWidth: true,
variableHeight: true,
adaptiveHeight: true,
arrows: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});
let $slidesDescriptions = $('.sg-feature-desc');
$(document).on('click', '.sg-feature', function() {
$slidesDescriptions.addClass('hidden');
let $slide = $(this);
$slide.find('.sg-feature-desc').removeClass('hidden');
$('body').css('background-image', `url('${$slide.data('bg')}')`);
});
</script>
</body>
</html>

background-repeat: no-repeat; Might be the problem here, as the size of the selected image might be too small and so your replaceable background image is hiding it.

Related

How to make sticky image swap text look better on mobile view?

I am a beginner and want to make this sticky image look better on mobile.
As you scroll, the image is in a fixed position and changes once it reaches a certain point and correlates with the related text.
However, it look good on desktop as a two column layout, but I want the text to span wider than it is on mobile.
Any help appreciated, thanks
https://jsfiddle.net/g67j5nLm
<div class="locker">
<div class="locker__image">
<div class="locker__container">
<img class="image image--1" src="https://assets.codepen.io/325536/placeimg_480_720_tech.jpg">
<img class="image image--2" src="https://assets.codepen.io/325536/tech.jpeg">
</div>
</div>
<div class="locker__content">
<div class="locker__section locker__section--1 cb" data-swap="image--1">
<h3>01</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="locker__section locker__section--2 cb" data-swap="image--2">
<h3>02</h3>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
.image {
opacity: 0;
transition: all .5s ease;
&.active {
opacity: 1;
}
}
.locker {
outline: 1px solid #cdcdcd;
outline-offset: -1px;
position: relative;
display: grid;
grid-template-columns: [full-start] minmax(4.2rem, 1fr) [center-start] repeat(12, [col-start] minmax(min-content, 8rem) [col-end]) [center-end] minmax(4.2rem, 1fr) [full-end];
&__image {
position: relative;
grid-column: col-start 2 / col-end 6;
img {
width: auto;
height: 70vh;
position: absolute;
transition: all 1s ease;
}
}
&__container {
position: sticky;
position: -webkit-sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
//background-color: #ccc;
}
&__content {
grid-column: col-start 8 / center-end;
}
&__section {
height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
border-top: 1px solid #cdcdcd;
&:first-child {
border: none;
}
p {
width: 70%;
}
}
}
if(typeof window.IntersectionObserver !== 'undefined') {
let options = {
threshold: [0.5, 1]
}
const targets = document.querySelectorAll('.cb');
const locker = document.querySelector('.locker__container');
function handleIntersection(entries) {
entries.map((entry) => {
if (entry.isIntersecting) {
entry.target.current = entry.target.dataset.swap;
document.querySelector(".locker__container ." + entry.target.current).classList.add("active");
} else {
document.querySelector(".locker__container ." + entry.target.current).classList.remove("active");
}
});
}
const observer = new IntersectionObserver(handleIntersection, options);
targets.forEach(target => observer.observe(target));
} else {
// Fallback
}

save/download html div as image/pdf

I am trying to save divs like the following one either as PDF or image file. The problem so far with solutions I found online are the clip-path attributes...
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="m-2">
<div class="border border-5 d-flex" style="width: 1000px; height: 500px;">
<div class="position-relative w-100 h-100">
<div class="position-absolute start-0 bottom-0" style="width: 0;height: 0;border-style: solid;border-width: 400px 0 0 250px; border-color: transparent transparent transparent #ffa447;"></div>
<div class="position-absolute start-0 top-0 h-100" style="background-color:blueviolet; width: 350px; clip-path: polygon(0 0, 100% 0, 40% 100%, 0% 100%); background-image: url('https://images.pexels.com/photos/842571/pexels-photo-842571.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'); background-repeat: no-repeat; background-size: cover;"></div>
<div class="m-4 position-absolute start-0" style="height: 200px; width: 200px; background-color: black; color: white; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/QR_deWP.svg/1200px-QR_deWP.svg.png'); background-repeat: no-repeat; background-size: cover;">
QR
</div>
<div class="position-absolute top-50 start-50 translate-middle">
<div class="d-flex justify-content-center text-center">
<h1 class="mb-0 text-uppercase" style="font-size: 40pt;">Lorem ipsum</h1>
</div>
<div class="d-flex justify-content-center text-center">
<div class="" style="width: 300px;">
<h1>Lorem ipsum</h1>
</div>
</div>
<div class="d-flex justify-content-center text-center">
<div class="row" style="width: 350px;">
<div class="col-2">
<h4>Lorem</h4>
</div>
<div class="col-10">
<h4>ipsum</h4>
</div>
<div class="col-2">
<h4>Lorem</h4>
</div>
<div class="col-10">
<h4>ipsum</h4>
</div>
</div>
</div>
<div class="d-flex justify-content-center text-center">
<p class="text-justify" style="width: 400px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div class="d-flex justify-content-center text-center mt-3">
<p class="mb-0 text-justify small" style="width: 450px; padding-right: 110px;color: grey;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
<div class="position-absolute end-0 bottom-0 h-100" style="background-color:blueviolet; width: 350px; clip-path: polygon(60% 0, 100% 0, 100% 100%, 0% 100%); background-image: url('https://images.pexels.com/photos/3338497/pexels-photo-3338497.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'); background-repeat: no-repeat; background-size: cover;">
<div class="mb-4 p-2 position-absolute bottom-0 start-50 translate-middle-x small" style="width: auto; max-width: 200px; background-color: rgba(255, 255, 255, 0.6);">
<p class="mb-0">Lorem ipsum</p>
<p class="mb-0">dolor sit</p>
<div class="d-flex">
<p class="mb-0 me-1">amet, </p><p class="mb-0">consetetur</p>
</div>
<p class="mb-0">sadipscing</p>
<p class="mb-0">elitr</p>
</div>
</div>
<div class="position-absolute end-0 top-0" style="width: 0;height: 0;border-style: solid;border-width: 0 250px 400px 0;border-color: transparent #ffa447 transparent transparent;"></div>
<div class="m-3 position-absolute end-0 top-0" style="height: 125px; width: 125px; background-color: black; color: white; background-image: url('https://png.pngtree.com/png-clipart/20190515/original/pngtree-coffee-time-png-image_3626459.jpg'); background-repeat: no-repeat; background-size: cover;">
logo
</div>
</div>
</div>
</div>
I tried different approaches with PHP or JS like html2canvas or jsPDF so far, but nothing saved the div the way it is displayed inside the browser.
The simplest method for HTML to PDF is to use the browser output e.g. Chrome
And this can be run as a headless print, here I use Windows Edge but you can of course use Edge or Chrome on other platforms. On Windows you may need to run that as Admin, it should be less than one blink, so fast I did not think it was done.
NOTE recently the switch --disable-gpu was removed from the options so may not be needed.
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --headless --disable-gpu --run-all-compositor-stages-before-draw --print-to-pdf="C:\Users\WDAGUtilityAccount\Desktop\SandBox\division.pdf" --print-to-pdf-no-header "C:\Users\WDAGUtilityAccount\Desktop\SandBox\division.html"
However note that due to cross site security some images are missing so we need to ensure they are local and simply remove the remote part of url
Add this at the end just for a tidy approach </body></html> and use this as your heading
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=https://stackoverflow.com/questions/71998862 -->
<html><head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Lorum Ipsum</title>
<meta name="GENERATOR" content="KJs Template Builder V 2022-04">
<meta http-equiv="Content-Style-Type" content="text/css"><style>
#media print {
#page {
/* For different margins – use the standard CSS margin property: north, east, south, west, here it is one value */
margin: 0;
/* Browser default, customisable by the user if using the print dialogue. */
size: auto;
/* Different width and height. here using stated width="1000" height="500" can be px or pt or cm. For square, just use one value or use name like A6 landscape; note this is over-riding any above size: but we need to bump up for browser rounding*/
size: 1020px 520px;
}
body { margin: 0; }
}
</style></head><body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

Javascript not working on ipad (tested on ios 13.7 and ios 14.0 - in chrome, safari and firefox) or iphone (tested on iphone SE ios 13.7)

I wonder if you can help me please? I am trying to get a a piece of javascript to work on ios devices. I have multiple images on a page in divs and on click I would like to slide across a panel of information (hidden to the left) and once that panel slides in, if that panel is clicked, I would like it to slide back out to the left.
Here is the code I have that works perfectly on all desktop browsers but doesn't do a thing on ios - I can't understand it and am uncertain how to test or check for problems on ios.
Here is a Fiddle: https://jsfiddle.net/adpLqbt2/31/
CSS
.box {
display: inline-block;
position: relative;
width: 500px;
height: 500px;
overflow: hidden;
}
.overlay-btn {
display: inline-block;
position: absolute;
cursor: pointer;
height: 500px;
width: 500px;
z-index: 10;
background: url('../img/icons/info.svg') 98% 98% no-repeat;
}
.overlay-content {
position: absolute;
top: 0;
left: -500px;
width: 500px;
margin: 0;
height: 500px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.over-show {
left: 0;
height: 500px;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
}
HTML
<div class="box">
<div class="overlay-btn"></div>
<div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<img src="https://via.placeholder.com/500" alt="rah" />
</div>
<div class="box">
<div class="overlay-btn"></div>
<div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<img src="https://via.placeholder.com/500" alt="yay" />
</div>
<div class="box">
<div class="overlay-btn"></div>
<div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<img src="https://via.placeholder.com/500" alt="see" />
</div>
JS
const triggers = document.getElementsByClassName('overlay-btn');
const triggerArray = Array.from(triggers).entries();
const panels = document.getElementsByClassName('overlay-content');
const infoButtons = document.getElementsByClassName('overlay-btn');
for (let [index, trigger] of triggerArray) {
let triggerIndex = index;
function togglePanel() {
panels[triggerIndex].classList.toggle('over-show');
infoButtons[triggerIndex].classList.toggle('js-fade');
}
trigger.addEventListener('click', togglePanel);
infoButtons[triggerIndex].addEventListener('click', togglePanel);
}

fading scrollbar when not scrolling

I recently started making a little website project and I'm struggling a bit with customizing my scrollbar.
I got so far that the scrollbar is only visible when you hover over it but that's not exactly my goal. I want it to be hidden when the user didn't scroll for a certain period of time. This is what I got so far:
<style>
::-webkit-scrollbar {
width: 6px;
height: 12px;
}
::-webkit-scrollbar-track {
background: rgba(242, 242, 242, 0);
}
::-webkit-scrollbar-thumb {
background: rgba(221, 221, 221, 0);
border-radius: 3px;
}
/*Commented because I don't want it to show when I just hover the site
body:hover::-webkit-scrollbar-thumb {
background: rgb(0, 0, 0);
}
*/
body.scrolling::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:horizontal:hover,
::-webkit-scrollbar-thumb:vertical:hover {
background: rgb(0, 0, 0);
}
::-webkit-scrollbar-thumb:horizontal:active,
::-webkit-scrollbar-thumb:vertical:active {
background: rgb(0, 0, 0);
}
</style>
<script>$(window).scroll(function() {
$('body').addClass('scrolling');
alert("!!");
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$('body').removeClass('scrolling');
}, 250));
});</script>
This is my first post on a forum like this so please just tell me if I have to provide more info and which info is missing.
I think its just a typo. Change the closing style tag to </style>. It can't be tested very well if theres an alert popping up every time you scroll. Remove alert("!!"); or change it to console.log("!!");
[LATER]
As you want the scrollbar to fade in and out with a transition, you'll have to use an element that covers it and animate its opacity. It's not possible to put an element above the document's scrollbar though. That's why you have to wrap the whole page inside a div and customize its scrollbar.
document.querySelector('.scroll-box').addEventListener('scroll', hideCoverBar);
document.querySelector('.scroll-box').addEventListener('mousemove', hideCoverBar);
var showTimeout;
function hideCoverBar() {
document.querySelector('.cover-bar').classList.add('hidden');
clearTimeout(showTimeout);
showTimeout = setTimeout(showCoverBar, 1000);
}
function showCoverBar() {
document.querySelector('.cover-bar').classList.remove('hidden');
}
body,
html {
margin: 0;
padding: 0;
font-family: monospace;
}
.main {
padding: 20px;
}
h1 {
font-size: 50px;
margin: 0;
}
p {
font-size: 12px;
margin: 0;
}
img {
display: block;
margin: 0 auto;
padding: 20px;
max-width: 100%;
box-sizing: border-box;
}
.scroll-bar-wrap {
width: 100vw;
position: relative;
}
.scroll-box {
width: 100%;
height: 100vh;
overflow-y: scroll;
}
.scroll-box::-webkit-scrollbar {
width: .4em;
}
.scroll-box::-webkit-scrollbar,
.scroll-box::-webkit-scrollbar-thumb {
overflow: visible;
border-radius: 4px;
}
.scroll-box::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .2);
}
.cover-bar {
position: absolute;
background: #fff;
pointer-events: none;
height: 100%;
top: 0;
right: 0;
width: .4em;
-webkit-transition: all .5s;
opacity: 1;
}
.cover-bar.hidden {
opacity: 0;
}
<div class="scroll-bar-wrap">
<div class="scroll-box">
<div class="main">
<h1>Lorem ipsum dolor sit amet
</h1>
<img src="http://placekitten.com/600/400" />
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</div>
</div>
<div class="cover-bar"></div>
</div>
fiddle: https://jsfiddle.net/71fjr0Lz/

Pop-up background not covering navigation bar

Explanation
I have this pop-up showing when clicking a button, but for some reason, when displayed, the background isn't covering the navigation bar. I've already tried to change the z-index, but nothing happens. It'll only cover the navigation bar when there's no animation.
Code
You can also see it in JSFiddle (full screen).
var custom = function() {
var handlePopup = function() {
var overlay = $('.popup-overlay'),
close = $('.popup-close'),
trigger = $('.popup-trigger'),
parent = $('.popup-container');
trigger.on('click', function() {
$(this).closest('.popup-container').addClass('popup-overlay-show');
});
close.on('click', function(e) {
e.stopPropagation();
parent.removeClass('popup-overlay-show');
});
}
return {
init: function() {
handlePopup();
},
};
}();
$(document).ready(function() {
custom.init();
});
.navbar {
background-color: yellow;
}
.overlay {
cursor: pointer;
}
.btn {
margin-top: 100px;
}
.popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
background: rgba(0, 0, 0, 0.55);
}
.popup-overlay-show {
z-index: 1;
}
.popup-overlay-show .popup-overlay {
opacity: 1;
visibility: visible;
z-index: 2000 !important;
}
.popup-content {
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 600px;
height: auto;
background: #fff;
padding: 35px;
margin: 0 auto;
transform: translate3d(0, -50%, 0);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
</header>
<div class="popup-container">
<div class="popup-trigger animated fadeInUp">
<div class="overlay">
<a class="btn btn-default" href="#" role="button">Open</a>
</div>
<div class="popup-overlay">
<div class="popup-content">
Close
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>
Thanks in advance,
Luiz.
Try This CSS
CSS
.navbar {
background-color: yellow;
z-index:10;
}
.popup-container{
position: relative;
}
.popup-overlay-show {
z-index: 16;
}
Link For Reference
As Iscmaro suggested above, it's also possible to solve it by using Bootstrap's modal, as you can see below.
You can also see it on JSFiddle (full screen).
.navbar {
background-color: yellow;
}
.btn {
margin-top: 100px;
}
.vertical-alignment-helper {
display: table;
height: 100%;
width: 100%;
}
.vertical-align-center {
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
</header>
<button type="button" class="btn btn-default animated fadeInUp" data-toggle="modal" data-target="#myModal">Open</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>

Categories