CSS使背景变暗

/* essential code */

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .5);
  transition: all ease 1s;
}

.closeoverlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  display: block;
  z-index: 2;
  position: fixed;
  cursor: pointer;
}

.closebutton {
  color: red;
  text-decoration: none;
  font-size: 30px;
  margin: 0 auto;
  display: table;
}

.modal:target {
  opacity: 1;
  pointer-events: auto;
  
}

.modal:target>.closeoverlay {
  display: block;
}

.modal>div {
  width: 300px;
  height: 500px;
  max-width: 75vw;
  max-height: 75vh;
  text-align: center;
  position: relative;
  background: #131418;
  z-index: 3
}

.wrap,
.modal {
  display: flex;
  align-items: center;
  justify-content: center
}

.modal-content {
 overflow-y:auto
}


/*demo fluff */

p {
  color: green;
  font-size: 20px;
  display: block;
}

button {
  margin: 2em 0 0 0;
  cursor: pointer;
}

.closebutton:hover {
  color: white;
  cursor: pointer;
}

.clutter, .modal-content p {
  margin: 2em auto;
  padding: 40px;
  max-width: 100%;
  text-align: justify;
}


.clutter {width: 400px}

<div class="wrap">
  <a href="#M"><button>Open Modal</button></a>
  <div id="M" class="modal">
    <div class="modal-content">
      <a class="closebutton" href="#">&times;</a>
      <p>Modal window</p>
    </div>
    <a href="#" class="closeoverlay"></a>
  </div>
</div>
<div class="clutter">Project Gutenberg offers over 57,000 free eBooks. Choose among free epub books, free kindle books, download them or read them online. You will find the world's great literature here, with focus on older works for which copyright has expired. Thousands of volunteers digitized and diligently proofread the eBooks, for enjoyment and education.

No fee or registration is required. If you find Project Gutenberg useful, please consider a small donation, to help Project Gutenberg digitize more books, maintain our online presence, and improve Project Gutenberg programs and offerings. Other ways to help include digitizing more books, recording audio books, or reporting errors.

News
No Fees, and No Custom Apps Required
Project Gutenberg never charges a fee, for anything. Everything from Project Gutenberg is gratis, libre, and completely without cost to readers. Free to read and free to redistribute. Project Gutenberg eBooks require no special apps to read, just the regular Web browsers or eBook readers that are included with computers and mobile devices. There have been reports of sites that charge fees for custom apps, or for the same eBooks that are freely available from Project Gutenberg. Some of the apps might have worthwhile features, but none are required to enjoy Project Gutenberg eBooks.

The Public Domain will grow again in 2019
In the US, annual copyright term expiry is set to begin again in 2019, after a 20-year hiatus due to the Copyright Term Extension Act of 1998. On January 1, 2019, items published in 1923 will enter the public domain in the US. In the early days of Project Gutenberg, growth of the public domain on January 1 was an annual event. See Duke Law's "Public Domain Day"for a listing of many items that were scheduled to enter the public domain, but have yet to do so because of the 1998 extension. Some notable items scheduled to enter the public domain in 2019 include Felix Salten's "Bambi" and Kahlil Gibran's "The Prophet."</div>