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>
Related
My goal is to be able to vertically align animated text in a div element. I have tried looking for an answer on here, but can't seem to find any. Specifically, I've tried display:table-cell, vertical-align:middle, and line-height:__, but they all give the same result.
let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0
function anims() {
let elem = document.getElementById(elemIds[currentAnimId])
let bgimg = document.getElementById('backgroundImg')
currentAnimId += 1
bgimg.style.animation="bgblur 5s";
elem.style.display = 'block'
elem.style.animation="textAnim 5s";
window.setTimeout(() => {
bgimg.style.animation="none";
elem.style.display = 'none'
elem.style.animation="none";
elem.style.webkitAnimation = 'none';
window.setTimeout(function() {
elem.style.webkitAnimation = '';
if (currentAnimId < elemIds.length) {
anims(currentAnimId)
} else {
console.log("You have reached the end of the text cycle.")
}
}, 1000);
}, 5000)
}
anims(currentAnimId)
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
#backgroundImg:empty {
display: block;
position: relative;
}
h1 {
position: absolute;
vertical-align: middle;
}
#backgroundImg {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
/* animation: blurry 5s; */
-webkit-filter: blur(0px);
background-repeat: no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
}
#backgroundImg, #textDiv {
width: 100%;
height: 100%;
position: absolute;
}
#textDiv {
left: 100px;
height: 80%;
width: 80%;
color: transparent;
-webkit-text-stroke: 1px white;
text-shadow: 10px 10px 20px black;
z-index: 10;
vertical-align: middle;
text-align: left;
}
#a, #b, #c, #d, #e {
font-size: 800%;
display: none;
}
#keyframes bgblur {
0% {
-webkit-filter: blur(0px);
}
25% {
-webkit-filter: blur(5px);
}
75%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="backgroundImg">
</div>
<div id="textDiv">
<h1 id="a">a</h1>
<h1 id="b">b</h1>
<h1 id="c">c</h1>
<h1 id="d">d</h1>
<h1 id="e">e</h1>
</div>
<script src="script.js"></script>
</body>
</html>
If anyone could help that would be great!
PS: I just want it vertically centered, not horizontally.
Thanks!
Add display: flex; align-items: center; to your textDiv. Your textDiv height is 80%, you should make it 100% if you want to center vertically on all screen
let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0
function anims() {
let elem = document.getElementById(elemIds[currentAnimId])
let bgimg = document.getElementById('backgroundImg')
currentAnimId += 1
bgimg.style.animation="bgblur 5s";
elem.style.display = 'block'
elem.style.animation="textAnim 5s";
window.setTimeout(() => {
bgimg.style.animation="none";
elem.style.display = 'none'
elem.style.animation="none";
elem.style.webkitAnimation = 'none';
window.setTimeout(function() {
elem.style.webkitAnimation = '';
if (currentAnimId < elemIds.length) {
anims(currentAnimId)
} else {
console.log("You have reached the end of the text cycle.")
}
}, 1000);
}, 5000)
}
anims(currentAnimId)
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
#backgroundImg:empty {
display: block;
position: relative;
}
h1 {
position: absolute;
vertical-align: middle;
}
#backgroundImg {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
/* animation: blurry 5s; */
-webkit-filter: blur(0px);
background-repeat: no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
}
#backgroundImg, #textDiv {
width: 100%;
height: 100%;
position: absolute;
}
#textDiv {
left: 100px;
height: 80%;
width: 80%;
color: transparent;
-webkit-text-stroke: 1px white;
text-shadow: 10px 10px 20px black;
z-index: 10;
display: flex;
align-items: center;
text-align: left;
}
#a, #b, #c, #d, #e {
font-size: 800%;
display: none;
}
#keyframes bgblur {
0% {
-webkit-filter: blur(0px);
}
25% {
-webkit-filter: blur(5px);
}
75%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="backgroundImg">
</div>
<div id="textDiv">
<h1 id="a">a</h1>
<h1 id="b">b</h1>
<h1 id="c">c</h1>
<h1 id="d">d</h1>
<h1 id="e">e</h1>
</div>
<script src="script.js"></script>
</body>
</html>
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/
I have some html and while things are loading I have a <div> that display while it loads, when it is loading currently the loading appears above everything, but I want the header to be above the loading screen. Here is the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="loading">
<div id="loading-container">
<h1 id="loading_text">Loading...</h1>
</div>
</div>
<header>
<a id="logo" href="user_profile.html">
<h1 id="name">Name</h1>
<h2 id="hello">Hello</h2>
</a>
<nav>
<ul>
<li>Profile</li>
<li>Info</li>
<li>Specials</li>
<li>Social</li>
</ul>
</nav>
</header>
</body>
</html>
And here is the css
header {
float:left;
margin:0 0 30px 0;
padding:5px 0 0 0;
width:100%;
z-index: 102;
}
#logo {
text-align:center;
margin:0;
}
h1 {
font-family:'Nunito', 'sans-serif';
margin: 15px 0;
font-size:1.75em;
font-weight:normal;
line-height:0.8em;
}
h2 {
margin:-5px 0 0;
font-size:0.75em;
font-weight:normal;
}
ul {
padding: 0 0;
}
#loading {
width: 100%;
height: 100%;
left: 0px;
position: fixed;
display: block;
background: rgba(255, 255, 255, 0.5);
z-index: 99;
}
#loading-container {
position: relative;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0);
z-index: 99;
}
#loading_image {
display: block;
margin: auto;
z-index: 100;
}
#loading_text {
color: black;
text-align: center;
z-index: 101;
vertical-align: middle
}
As you can see I set the z-index of the header higher than everything else but it is still below the loading screen here is a JSBin with a running example, in the example I show the loading screen for 3 seconds.
How can I get the header above the loading screen?
Thanks
z-index woks by position. Add position:relative to the header.
Point, Note:
Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).
JSbin
Use this on the header tag:
position: relative;
this one will also work but could change the rest of the html, I don't know what else you have on it.
position: absolute;
just add in the header{}
position:absolute;
top:0;
If I've got the question right this should do what you need.
I am a beginner, and I want to create a menu which is a cross in the middle of the screen. The cross should have in each section a button which works with a hover. I could work something out already, however it does not really work, since it can changes according to the browser size. I want that it always stays in the middle and does not move at all. Attached you can find the code I came up with. Furthermore I created a jsfiddle document: https://jsfiddle.net/50xxq5vc/
Thanks for your help!
<!DOCTYPE HTML>
<HTML>
<Head>
<Title>This is a Test</Title>
<style>
#import url('http://fonts.googleapis.com/css?family=Lobster');
body
{
background-color:#ffffff;
}
p{
color:#000000;
}
img.party{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.birne
{
position:absolute;
margin-top:15%;
margin-left:48%;
opacity: 1; filter: alpha(opacity=100);
}
.birne:hover
{
opacity: 0.3; filter: alpha(opacity=30);
}
.love
{
opacity: 1; filter: alpha(opacity=100);
}
.love:hover
{
opacity: 0.3; filter: alpha(opacity=30);
}
.hellotext
{
font-size: 18px;
font-family: 'Lobster', cursive;
position:absolute;
margin-top:12%;
margin-left:45%;
}
</style>
</head>
<Body>
<div><img class="party" src="http://s15.postimg.org/ms7vel74b/cross.png"/></div>
<div class="love">
<span class="hellotext">This is a test</span>
<div> <img class="birne" src="http://s23.postimg.org/sugyvz04n/birne.png"/></div>
</div>
</Body>
</html>
To center an element it is easiest to give it a fixed width and height. Then, by placing it absolute, you can center it. I redid your HTML:
<img class="party" src="http://s15.postimg.org/ms7vel74b/cross.png" />
<p>
<img class="birne" src="http://s23.postimg.org/sugyvz04n/birne.png" /><br />
This is a test
</p>
And the CSS:
#import url('http://fonts.googleapis.com/css?family=Lobster');
img.party {
position: absolute;
z-index: 5;
width: 272px;
height: 272px;
left: 50%;
top: 50%;
margin-left: -136px; /* half of the width */
margin-top: -136px; /* half of the height */
}
p {
opacity: 0.3;
font-size: 18px;
font-family:'Lobster', cursive;
text-align: center;
position: absolute;
z-index: 10;
width: 272px;
height: 136px;
left: 50%;
top: 50%;
margin-left: -136px;
margin-top: -136px;
}
p:hover {
opacity: 1;
}
Also see this JSFiddle
Note that it might need some adjusting in the height settings of the p, you can alter that by changing the margin-top.
Maybe you could try with something like this: https://jsfiddle.net/8xc2415y/3/
<div id="container">
<div id="wrapper">
<div id="topsection">
<div class="love">
<span class="hellotext">This is a test - TOP</span>
<div> <img class="birne" src="http://s23.postimg.org/sugyvz04n/birne.png"/></div>
</div>
</div>
<!-- other sections -->
</div>
</div>
and css like:
#container{
width:272px;
height:272px;
background-image:url(http://s15.postimg.org/ms7vel74b/cross.png);
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
#container #wrapper{
position: relative;
width: 120%;
height: 120%;
top: -10%;
left: -10%;
}
#topsection {
position:absolute;
height: 130px;
margin: auto;
left: 0;
right: 0;
top: 0;
}
I was doing previous and next experiments like facebook, as we do a hover on image it will show previous and next icons. I modified the icons a little bit using simple CSS. but only thing i am missing here is the correct position of the navigation div's.
I want them in the middle of image no matter if the image is 600*600 or 1024*800.
i tried these, but didnt make any progress -
var maskHeight = ($('mainOne').height() - 50);
$('#hoverP').css({top:maskHeight}).show();
$('#hoverN').css({top:maskHeight}).show();
here is sample test case, which includes everything related to problem, Please Help.-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="./jQuery.min.js"></script>
<style>
.imgHover {
display: inline;
position: relative;
}
.imgHover .hoverP {
display: none;
position: absolute;
left: 3px;
top:-200px;
z-index: 2;
}
.imgHover .hoverN {
display: none;
position: absolute;
right: 0px;
top:-200px;
z-index: 2;
}
.prev_big,.next_big {
background-color:rgba(66,28,82,0.4);;
border:2px solid rgba(255,255,255,0.7);
color:#FFF;
font-size:78px;
font-weight:700;
width:30px;
height:200px;
line-height:200px;
-webkit-transition:.4s all;
-moz-transition:.4s all;
-o-transition:.4s all;
transition:.4s all;
text-shadow:0 1px 0 #FFF;
z-index:3;
text-decoration:none;
-moz-transition-duration:.4s;
-webkit-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.prev_big {
border-bottom-right-radius:15px;
border-top-right-radius:15px;
margin-left:-3px;
padding:0 20px 0 0;
}
.next_big {
border-bottom-left-radius:15px;
border-top-left-radius:15px;
right:0;
padding:0 5px 0 15px;
}
.prev_big:hover,.next_big:hover {
color:#FFF;
background:#732C7B;
padding-top:140px;
padding-bottom:140px;
}
</style>
</head>
<script>
$(function() {
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.95).end().children(".hoverP").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hoverP").hide();
}
);
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.95).end().children(".hoverN").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hoverN").hide();
}
);
});
</script>
<body>
<div class="imgHover">
<div class="hoverP"><a class="prev_big" href="page1.html" title="View Previous Page"><</a></div>
<img id="mainOne" src="./oneB.jpg" alt="">
<div class="hoverN"><a class="next_big" href="page3.html" title="View --Next-- Page">></a></div>
</div>
</body>
</html>
Why you need jQuery, bunch of styles with filled markup? I've made this from complete scratch and you see if it's useful
Demo
On the other hand you can use transitions for smoothness - Demo
<div class="wrapper">
<img src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="bar">PreviousNext</div>
</div>
CSS
div.wrapper {
position: relative;
display: inline-block;
}
.bar {
opacity: 0;
background: rgba(25,25,25,.5);
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
}
div:hover .bar {
opacity: 1;
}
.wrapper a {
position: absolute;
}
.wrapper a:nth-of-type(1) {
left: 0;
}
.wrapper a:nth-of-type(2) {
right: 0;
}