CODEWITHSUNDEEP
htmlcss
Mark
Mark

Reputation: 4935

Dialog window with partly opaque grey background

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:

Chrome Confirmation Dialog Box

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:

Bad result - black stripe

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>

Upvotes: 1

Views: 2195

Answers (3)

Mark
Mark

Reputation: 4935

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>

Upvotes: 0

kyun
kyun

Reputation: 10264

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>

Upvotes: 1

fmontes
fmontes

Reputation: 478

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;
}

Upvotes: 1

Related Questions