Dialog window with partly opaque grey background
0
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 <a href="#" onclick="blah();return false;">Click me</a>
</body>
</html>html css
edited Nov 22 '18 at 2:43
Muhammad
2,10321734
asked Nov 22 '18 at 2:25
MarkMark
1,61042333
add a comment |
0
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 <a href="#" onclick="blah();return false;">Click me</a>
</body>
</html>html css
edited Nov 22 '18 at 2:43
Muhammad
2,10321734
asked Nov 22 '18 at 2:25
MarkMark
1,61042333
add a comment |
0
0
0
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 <a href="#" onclick="blah();return false;">Click me</a>
</body>
</html>html css
edited Nov 22 '18 at 2:43
Muhammad
2,10321734
asked Nov 22 '18 at 2:25
MarkMark
1,61042333
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 <a href="#" onclick="blah();return false;">Click me</a>
</body>
</html>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 <a href="#" onclick="blah();return false;">Click me</a>
</body>
</html>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 <a href="#" onclick="blah();return false;">Click me</a>
</body>
</html>html css
html css
edited Nov 22 '18 at 2:43
Muhammad
2,10321734
asked Nov 22 '18 at 2:25
MarkMark
1,61042333
edited Nov 22 '18 at 2:43
Muhammad
2,10321734
asked Nov 22 '18 at 2:25
MarkMark
1,61042333
edited Nov 22 '18 at 2:43
Muhammad
2,10321734
edited Nov 22 '18 at 2:43
Muhammad
2,10321734
edited Nov 22 '18 at 2:43
Muhammad
2,10321734
2,10321734
asked Nov 22 '18 at 2:25
MarkMark
1,61042333
asked Nov 22 '18 at 2:25
MarkMark
1,61042333
asked Nov 22 '18 at 2:25
MarkMark
1,61042333
1,61042333
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
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;
}
answered Nov 22 '18 at 2:34
fmontesfmontes
25318
Thanks that worked! But to handle the 'click to dismiss' action I removed the blah() method and placed the overlay div at the end of the html - see my answer
– Mark
Nov 22 '18 at 3:14
Awesome. Glad it help.
– fmontes
Nov 22 '18 at 3:16
add a comment |
0
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 <a href="#" onclick="blah();return false;">Click me</a>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 <a href="#" onclick="modalOn();return false;">Click me</a>answered Nov 22 '18 at 2:38
zynknzynkn
3,94321031
add a comment |
0
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 <a href="#" onclick="document.getElementById('overlay').style.visibility = 'visible';return false;">Click me</a>
<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>
answered Nov 22 '18 at 3:17
MarkMark
1,61042333
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423051%2fdialog-window-with-partly-opaque-grey-background%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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;
}
answered Nov 22 '18 at 2:34
fmontesfmontes
25318
Thanks that worked! But to handle the 'click to dismiss' action I removed the blah() method and placed the overlay div at the end of the html - see my answer
– Mark
Nov 22 '18 at 3:14
Awesome. Glad it help.
– fmontes
Nov 22 '18 at 3:16
add a comment |
1
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;
}
answered Nov 22 '18 at 2:34
fmontesfmontes
25318
Thanks that worked! But to handle the 'click to dismiss' action I removed the blah() method and placed the overlay div at the end of the html - see my answer
– Mark
Nov 22 '18 at 3:14
Awesome. Glad it help.
– fmontes
Nov 22 '18 at 3:16
add a comment |
1
1
1
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;
}
answered Nov 22 '18 at 2:34
fmontesfmontes
25318
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;
}
answered Nov 22 '18 at 2:34
fmontesfmontes
25318
answered Nov 22 '18 at 2:34
fmontesfmontes
25318
answered Nov 22 '18 at 2:34
fmontesfmontes
25318
answered Nov 22 '18 at 2:34
fmontesfmontes
25318
25318
Thanks that worked! But to handle the 'click to dismiss' action I removed the blah() method and placed the overlay div at the end of the html - see my answer
– Mark
Nov 22 '18 at 3:14
Awesome. Glad it help.
– fmontes
Nov 22 '18 at 3:16
add a comment |
Thanks that worked! But to handle the 'click to dismiss' action I removed the blah() method and placed the overlay div at the end of the html - see my answer
– Mark
Nov 22 '18 at 3:14
Awesome. Glad it help.
– fmontes
Nov 22 '18 at 3:16
Thanks that worked! But to handle the 'click to dismiss' action I removed the blah() method and placed the overlay div at the end of the html - see my answer
– Mark
Nov 22 '18 at 3:14
Thanks that worked! But to handle the 'click to dismiss' action I removed the blah() method and placed the overlay div at the end of the html - see my answer
– Mark
Nov 22 '18 at 3:14
Awesome. Glad it help.
– fmontes
Nov 22 '18 at 3:16
Awesome. Glad it help.
– fmontes
Nov 22 '18 at 3:16
add a comment |
0
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 <a href="#" onclick="blah();return false;">Click me</a>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 <a href="#" onclick="modalOn();return false;">Click me</a>answered Nov 22 '18 at 2:38
zynknzynkn
3,94321031
add a comment |
0
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 <a href="#" onclick="blah();return false;">Click me</a>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 <a href="#" onclick="modalOn();return false;">Click me</a>answered Nov 22 '18 at 2:38
zynknzynkn
3,94321031
add a comment |
0
0
0
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 <a href="#" onclick="blah();return false;">Click me</a>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 <a href="#" onclick="modalOn();return false;">Click me</a>answered Nov 22 '18 at 2:38
zynknzynkn
3,94321031
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 <a href="#" onclick="blah();return false;">Click me</a>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 <a href="#" onclick="modalOn();return false;">Click me</a>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 <a href="#" onclick="blah();return false;">Click me</a>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 <a href="#" onclick="blah();return false;">Click me</a>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 <a href="#" onclick="modalOn();return false;">Click me</a>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 <a href="#" onclick="modalOn();return false;">Click me</a>answered Nov 22 '18 at 2:38
zynknzynkn
3,94321031
answered Nov 22 '18 at 2:38
zynknzynkn
3,94321031
answered Nov 22 '18 at 2:38
zynknzynkn
3,94321031
answered Nov 22 '18 at 2:38
zynknzynkn
3,94321031
3,94321031
add a comment |
add a comment |
0
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 <a href="#" onclick="document.getElementById('overlay').style.visibility = 'visible';return false;">Click me</a>
<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>
answered Nov 22 '18 at 3:17
MarkMark
1,61042333
add a comment |
0
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 <a href="#" onclick="document.getElementById('overlay').style.visibility = 'visible';return false;">Click me</a>
<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>
answered Nov 22 '18 at 3:17
MarkMark
1,61042333
add a comment |
0
0
0
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 <a href="#" onclick="document.getElementById('overlay').style.visibility = 'visible';return false;">Click me</a>
<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>
answered Nov 22 '18 at 3:17
MarkMark
1,61042333
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 <a href="#" onclick="document.getElementById('overlay').style.visibility = 'visible';return false;">Click me</a>
<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>
answered Nov 22 '18 at 3:17
MarkMark
1,61042333
edited Nov 26 '18 at 2:40
answered Nov 22 '18 at 3:17
MarkMark
1,61042333
answered Nov 22 '18 at 3:17
MarkMark
1,61042333
answered Nov 22 '18 at 3:17
MarkMark
1,61042333
1,61042333
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423051%2fdialog-window-with-partly-opaque-grey-background%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
