CODEWITHSUNDEEP
javascripthtmlcss
user14058044
user14058044

Reputation:

How to add text in an overlay in html?

here is what i have tried to add "processing" as text in the middle of the window on overlay

function on() {
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div id="overlay" onclick="off()"></div>

<div style="padding:20px">
  <h2>Overlay</h2>
  <p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
  <button onclick="on()">Turn on overlay effect</button>
</div>


</body>
</html>

Is their any way to add "processing" text to overlay ? I am trying that "processing" to appear in middle also.

Upvotes: 1

Views: 968

Answers (3)

Mike Donkers
Mike Donkers

Reputation: 3699

You can simply place i.e. a h1 in the <div id="overlay" onclick="off()">. It'll be hidden with it and only show when you open the overlay with JavaScript.

The CSS in the snippet at #overlay h1 is just to center the h1 to the page.

function on() {
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  cursor: pointer;
  color: white;
}

#overlay h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <div id="overlay" onclick="off()">
    <h1>Processing</h1> <!--Add your text here -->
  </div>

  <div style="padding:20px">
    <h2>Overlay</h2>
    <p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
    <button onclick="on()">Turn on overlay effect</button>
  </div>


</body>

</html>

Upvotes: 1

brk
brk

Reputation: 50326

You can add text in the overlay & use transform properties

function on() {
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  cursor: pointer;
}

.txt {
  font-size: 50px;
  color: #fff;
  transform: translate(40%, 150px);
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <div id="overlay" onclick="off()">
    <div class='txt'>Processing</div>
  </div>

  <div style="padding:20px">
    <h2>Overlay</h2>
    <p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
    <button onclick="on()">Turn on overlay effect</button>
  </div>


</body>

</html>

Upvotes: 0

Always Helping
Always Helping

Reputation: 14570

You can simply use and easiest way is to use after CSS pseudo-element to add the word processing. This way it will be responsive on the modern browsers as well.

Live Demo:

function on() {
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  cursor: pointer;
}

#overlay::after {
  content: 'Processing...';
  font-size: 20px;
  color: white;
  position: relative;
  top: 50%;
  left: 50%;
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <div id="overlay" onclick="off()"></div>

  <div style="padding:20px">
    <h2>Overlay</h2>
    <p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
    <button onclick="on()">Turn on overlay effect</button>
  </div>


</body>

</html>

Upvotes: 1

Related Questions