<div id="help-overlay" onclick="off()">
  <div id="help-text">
    <!-- EDIT BELOW OVERLAY CONTENT WITH TEXT/HTML. THIS IS WHAT WILL DISPLAY WITHIN YOUR OVERLAY -->
    <h2>Help</h2>
    <p>Use Markdown or BBcode to add formatting. The toolbar will help you add common Markdown which involves adding certain special characters in front of or around your text, such as: <span class="help-code">**<b>bold</b>**</span>, <span class="help-code">*<i>italics</i>*</span>, <span class="help-code">~~<strike>strike</strike>~~</span>, <span class="help-code">>!spoiler!<</span>, <span class="help-code">[link text](url)</span>, and <span class="help-code">![alt text](image url)</span>.
<br>
BBcode is a common bracket style code that wraps your text, such as: <span class="help-code">[b]<b>bold</b>[/b]</span>, <span class="help-code">[i]<i>italics</i>[/i]</span>, <span class="help-code">[s]<strike>strike</strike>[/s]</span>, <span class="help-code">[url=]link text[/url]</span>, and <span class="help-code">[img]url[/img]</span>. <a href="#">learn more</a></p>
<!-- STOP EDITING -->
  </div>
</div>

<div id="help-button" style="padding:20px">
<!-- CHANGE THE FONT AWESOME CLASS BELOW TO USE A DIFFERENT ICON -->
  <button onclick="on()"><i class="far fa-question-circle"></i></button>
</div>
#help-overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 999999;
  cursor: pointer;
  overflow: scroll;
}

#help-text{
  font-size: 100%;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: white;
  margin: 50px;
}

#help-text h2 {
  text-align: center;
}

#help-text a {
  color: #fff;
}

.help-code {
  font-family: courier;
}

#help-button button {
  position: fixed;
  bottom: 20px;
  right: 15px;
  border-radius: 100%;
  border: 0px solid #ccc;
  background: transparent;
  font-size: 1.3rem;
  white-space: nowrap;
  text-decoration: none;
  color: #ccc;
  cursor: pointer;
}

#help-button button:hover,
#help-button button:focus {
    background: transparent;
}

#help-button button:focus {
    outline: none;
}

#help-button button:active {
    transform: scale(0.99);
}
function on() {
  document.getElementById("help-overlay").style.display = "block";
}

function off() {
  document.getElementById("help-overlay").style.display = "none";
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.