This is my css:
.modal-backdrop {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100%;
z-index: 1;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.96);
transition: width 1s ease-out;
}
.buttonBar {
right: 0;
height: 20px;
color: red;
}
.theImage {
position: absolute;
top: 0;
right: 0;
width: 350px;
height: 350px;
}
.button {
float: left;
}
Here is the html:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<div class="button">
<button id="open">Test</button>
</div>
<div class="modal-backdrop">
<img class="theImage" src=index.png />
<div class="buttonBar">button bar</div>
</div>
<!-- page 108 -->
<script type="text/javascript">
var button = document.getElementById('open');
var drawer = document.getElementsByClassName('modal-backdrop')[0];
var height = drawer.scrollHeight;
var width = drawer.scrollWidth;
button.addEventListener('click', function (event) {
event.preventDefault();
drawer.style.setProperty('width', '350px');
drawer.style.setProperty('height', height + 'px');
});
</script>
The button bar doesn't have any buttons in it yet and the text is just a placeholder. I want that button bar to go under the img tag but all it does is overlap the img. Any ideas on how to get this working?
You don't need to add position absolute or fixed to .theImage or .buttonBar.
Just use flex-direction: column; and buttonBar div will be under image.
jsfiddle: https://jsfiddle.net/aof6ysmn/
Related
This is my single file Vue component which has a modal.
<template>
<div>
<div class="container">
<div class="sidebar">
<button class="sidebar__gradient-button" #click="setModalVisible(true)" >Open Modal</button>
</div>
</div>
<!-- Modal -->
<div v-if="modalVisible" class="modal">
<div class="modal__card">
<div class="modal__card__container">
...
</div>
<div class="modal__close-button" #click="setModalVisible(false)">×</div>
</div>
</div>
<!-- Modal -->
<!-- Modal Overlay -->
<div v-if="modalVisible" class="overlay" />
<!-- Modal Overlay -->
</div>
</template>
<script>
export default {
data() {
return {
modalVisible: false
};
},
methods: {
setModalVisible: function(val) {
console.log(val);
return (this.modalVisible = val);
}
}
};
</script>
<style lang="scss">
#import "../../sass/app.scss";
</style>
On smaller screens, the modal open button is not at the top of the page however, the modal and the overlay render at the top of the page.
There are two things I would like to do:
Disable vertical scroll
Render the modal and overlay at the current position on the page (I do not want to snap scroll to top and I am anti-jQuery :D)
Here is the styling for the modal in Sass:
.modal {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
text-align: center;
margin-top: 130px;
#media #{$breakpoint-sm} {
margin-top: 0;
align-items: center;
#media #{$breakpoint-md} {
}
}
}
.modal__card {
z-index: 1000;
height: 272px;
width: 355px;
box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5);
background: white;
display: flex;
flex-direction: column;
align-items: center;
#media #{$breakpoint-sm} {
height: 310px;
width: 570px;
#media #{$breakpoint-md} {
}
}
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #262626;
opacity: 0.8;
mix-blend-mode: normal;
}
Please assist. I imagine that the "top" property needs to be dynamically set, somehow. Thank you for your time.
You can add overflow: hidden and padding-right on your body when the modal is open to replace scrollbar width with this function
function getScrollbarWidth() {
return window.innerWidth - document.documentElement.clientWidth;
}
When the user clicks a link I want to create a 'popup' dialog box centered in the browser window with a grey overly similar to this:
Note that the user can click anywhere outside the dialog box to dismiss it.
I've tried following this example, but it just creates a black stripe in a white page like this:
Here is my code:
function blah() {
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
}
#OVER {
width:100%;
height:100%;
left:0;/*IE*/
top:0;
text-align:center;
z-index:5;
position:fixed;
background-color:#fff;
}
.overlay {
width:100%;
z-index:6;
left:0;/*IE*/
top:30%;
font-color:#cdcdcd;
font-size:0.8em;
text-align:center;
position:fixed;
background-color:#000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<h1>This is the title</h1>
Here is some text Click me
</body>
</html>
This should work:
// JS, replace this
gab.innerHTML='<div class="overlay"><div class="dialog"><h1>hello</h1></div></div>';
// CSS
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4); // 0.4 is the opacity;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.dialog {
background-color: #fff;
}
the code I edited from yours
function blah() {
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML = '<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
}
#OVER {
width: 100%;
height: 100%;
left: 0;
/*IE*/
top: 0;
text-align: center;
z-index: 5;
position: fixed;
background-color: rgba(0,0,0,0.3);
}
.overlay {
width: 100%;
z-index: 6;
left: 0;
/*IE*/
top: 30%;
/* font-color: #cdcdcd; */
color: #cdcdcd;
font-size: 0.8em;
text-align: center;
position: fixed;
background-color: #fff
}
<h1>This is the title</h1>
Here is some text Click me
But, If I were you, I am trying to make the modal like this
I just added toggle.
It is NOT the best code to make modal.
It is just for reference.
function modalOn() {
let gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.setAttribute('onClick', 'modalOff()');
gab.innerHTML = '<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
}
function modalOff() {
let modal = document.getElementById('OVER');
document.body.removeChild(modal);
}
#OVER {
width: 100%;
height: 100%;
left: 0;
/*IE*/
top: 0;
text-align: center;
z-index: 5;
position: fixed;
background-color: rgba(0,0,0,0.3);
}
.overlay {
width: 100%;
z-index: 6;
left: 0;
/*IE*/
top: 30%;
color: #cdcdcd;
font-size: 0.8em;
text-align: center;
position: fixed;
background-color: #000;
}
<h1>This is the title</h1>
Here is some text Click me
Thanks to fmontes I ended up with this code which seems to work:
// css:
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4); // 0.4 is the opacity;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.dialog {
background-color: #fff;
}
// html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<h1>This is the title</h1>
Here is some text Click me
<div id='overlay' class="overlay" onclick="document.getElementById('overlay').style.visibility = 'hidden';return false;" style="visibility:hidden">
<div class="dialog"><h1>hello</h1></div></div>
</body>
</html>
My idea is, when my Boolean variable is true, than a grey container with a opacity overlaps the orange and with a higher z-index.
I can't click on some buttons or else inside the orange container.
But I need the flexbox on the wrapper.
At the moment, my idea with the z-index failed, and it's flex in a row.
How can I fix this and put the grey above the orange (both 100% width and high of the wrapper) and still using flexbox.
Important: When its overlapped, I can't click in the orange container, looking like it is disabled.
I've got following code:
angular.module("myApp", []).controller("myController", function($scope) {
$scope.isDisabled = true;
});
.wrapper {
display: flex;
width: 100%;
height: 50px;
border: 1px solid red;
z-index: 100;
}
.overlapped {
width: 100%;
height: 100%;
background-color: grey;
opacity: 0.5;
z-index: 102;
}
.someContent {
width: 100%;
height: 100%;
background-color: orange;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" class="wrapper">
<div ng-if="isDisabled" class="overlapped"></div>
<div class="someContent">I have some random content...</div>
</div>
To make the container overlaying the other:
just use position:relative in the parent .wrapper and position:absolute in overlapped
To disable the orange container:
use pointer-events:none linked to your Boolean variable. (might be optional)
angular.module("myApp", []).controller("myController", function($scope) {
$scope.isDisabled = true;
$scope.isPointer = true;
});
.wrapper {
display: flex;
width: 100%;
height: 50px;
border: 1px solid red;
position: relative;
}
.overlapped {
width: 100%;
height: 100%;
background-color: grey;
opacity: 0.5;
z-index: 1;
position: absolute;
}
.someContent {
width: 100%;
height: 100%;
background-color: orange;
}
.pointer-events {
pointer-events: none
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" class="wrapper">
<div ng-if="isDisabled" class="overlapped"></div>
<div ng-if="isPointer" class="someContent pointer-events">I have some random content...</div>
</div>
I am using CarouFredSel as my carousel and I want to visually vertically align the text content within this carousel to my body content. I know you can do this with javascript (I have commented it out) by adjusting the left property of #carousel based on the browser width but I am looking for a CSS solution.
The blue screenshot on the left is displaying the website when the browser is maximized, and the 'link3' in the carousel appears to be aligned with 'content'. The red screenshot on the right is displaying the website when the browser is minimized, and 'link1' is not visually aligned with 'content'.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css">
<script type="text/javascript" language="javascript" src="<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>"></script>
<script type="text/javascript" language="javascript" src="http://www.sfu.ca/~jca41/stuph/jquery.carouFredSel.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#carousel').carouFredSel({
items: 1,
scroll: {
fx: 'crossfade',
duration: 1000
},
pagination: {
container: '#pager',
duration: 500
}
});
/*$(window).resize(function() {
var winW = $(window).width();
var carouselWidth = $('#carousel .slide').css('width');
carouselWidth = carouselWidth.replace(/[^0-9]/g, '');
if (winW > carouselWidth) {
$('#c-carousel').css('left', (winW-carouselWidth)/2 + 'px');
} else {
$('#c-carousel').css('left', '0px');
}
}).resize();*/
});
</script>
<style type="text/css" media="all">
#heroicCarousel {
height: 100%;
padding: 0;
margin: 0 auto;
min-height: 250px;
position: relative;
z-index: 1000;
text-align:center;
max-width:600px;
}
.caroufredsel_wrapper {
width: 100% !important;
height: 100% !important;
}
#carousel {
position: absolute !important;
}
#carousel .slide {
width:600px;
height:250px;
overflow: hidden;
float: left;
}
#carousel .slide .content {
font-size: 55pt;
position: relative;
top: -100px;
left: 150px;
z-index: 5;
}
#carousel .slide img {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
#pager {
position: relative;
top: -700px;
left: 0;
z-index: 10;
display: block;
text-align: center;
}
#pager a {
background-color: #356;
display: inline-block;
width: 15px;
height: 15px;
margin-right: 6px;
border-radius: 10px;
box-shadow: 0 1px 1px #cef;
}
#pager a.selected {
background-color: #134;
}
#pager a span {
display: none;
}
#content {
background: yellow;
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
z-index: 20px;
top: -520px;
font-size: 60pt;
}
</style>
</head>
<body>
<div id="heroicCarousel">
<div class="caroufredsel_wrapper">
<div id="carousel">
<div class="slide">
<img src="http://www.placehold.it/600x250/ff0000/999999">
<div class="content">link1</div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/00ff00/999999">
<div class="content">link2</div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/0000ff/999999">
<div class="content">link3</div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/f0f0ff/999999">
<div class="content">link4</div>
</div>
</div>
</div>
<div id="pager">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<div id="content">
content
</div>
</body>
</html>
I usually do it with a wrapping elem around the divs. This elem is as wide as your widest div and any children with margin:0 auto; are centered to it. Example http://jsfiddle.net/5LJhC/1/
Very simple example but shows how as the carousel width changes the content div is centered
I am struggling with getting the layout of the header i have in mind together.
Here is the html so far:
<div id="header">
<img src="/img/headerBg.jpg" alt="" class="headerBg" />
<img src="/img/logo.png" alt="Logo" class="logo" />
<div id="loginBox">
other code
</div>
</div>
And the css so far:
#header {
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
}
.logo {
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
What I am trying to accomplish, is have the image "headerBg.jpg" display to 100% width of the div "header", so essentially it will be the background of the div itself. Then have the image "logo.png" and the div "loginBox" display above "headerBg.jpg".
The logo should be floated to the far left end and the loginBox floated to the far right as in the css.
With the image removed, the logo and div are placed correctly, but when the image is introduced they two floated items are placed after the image in the flow.
I have tried various additions and reconfigurations but none have proven to work out how I want them to.
I have added the image in the css as a background to the header div, but it does not stretch 100% that way.
Would anyone be able to provide some insight on this?
Also any tutorials covering things like this would be a great addition to my collection!
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
#header {
position:relative;
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
position:relative;
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.logo {
position:relative;
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/headerBg.jpg" alt="" class="headerBg" />
<img src="img/logo.png" alt="Logo" class="logo" />
<div id="loginBox">
other code
</div>
</div>
</body>
</html>
.header {
position: relative;
}
.headerBg {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
}
Note that this will scale the image to fit the width of the <div>; if you only want it to resize horizontally then you should set the height explicitly.
You could also try max-width: 100%; if you only want the image to scale on large windows.
Just make the header background image the true background of that div. Float does not ignore other objects the way that position: absolute does.
#header {
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
background: url(headerBg.jpg);
}
Set the div class which will not show any extra parts.
div {
overflow: hidden;
}
These settings worked perfect for me.. it will size ur photo for all pics..
#headerBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<!--link rel="stylesheet" href="#"-->
<style>
.mySlides {
display: none;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
height: 195px;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
}
.img2 {
float: center;
display: inline-block;
}
</style>
<style type="text/css">
.c4 {
max-width: 500px
}
.c3 {
width: 100%
}
.c2 {
display: inline-block;
text-align: center;
width: 100%;
}
.c1 {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2 class="c2">Automatic Slideshow</h2>
<div id="header" class="c2">
<img class="img2 c1" src="./img/16px/avi.png" alt="Pineapple">
<h1 class="c2">
I want to be
</h1>
<div class="c4">
<img id="carousel" src="" class="c3">
</div>
</div>
<script>
//set up things
var images = [];
images[0] = "./img/16px/avi.png";
images[1] = "./img/16px/bmp.png";
images[2] = "./img/16px/cpp.png";
var n = images.length - 1;
var carouselimg = document.getElementById("carousel");
var header = document.getElementById("carousel");
// preload all images
carouselimg.style.display = "none";
for (var i = 0; i < n; i++) {
carouselimg.src = images[i];
}
carouselimg.style.display = "block";
//prepare first round
var carouselIndex = 0;
// start show
rotate();
function rotate() {
var dr = header.getBoundingClientRect();
carouselimg.style.width = dr.width;
carouselimg.src = images[carouselIndex];
//index is a global variable
//so its state will be kept and we can load the first / next image
carouselIndex++;
// increment image array index
if (carouselIndex > n) {
// do we rech the end
carouselIndex = 0
// start from begin
}
setTimeout(rotate, 2000);
// restart rotation every 2 seconds
}
</script>
</body>
</html>
try using in your css:
max-height:100%;