[ CSS ] عند الضغط على الزر ينبثق صندوق

[ CSS ] عند الضغط على الزر ينبثق صندوق 

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.

[ CSS ] عند الضغط على الزر ينبثق صندوق

قد يصادف وانت تقوم بتصميم موقعك ان تحتاج مثل هذه الاضافة حيث مثلا تريد عند الضغط على زر , او رابط ينبثق صندوق او شيء اخر , بهذه الاضافة تستطيع تنفيذ ماتريد بكل سهولة مع بعض التعديلات في الكود ان كان لديك خلفية قليلة في لغة CSS.

معاينه

الكود :

<section class="background">
  <a href="#open-modal" class="button">الكاتب</a>
  <div id="open-modal" class="modal__background">     <div class="modal__content">
      <a href="#close" title="Close" class="close">
      <svg x="0px" y="0px" viewbox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_3">
 <path d="M34.421,24.02l13.318-13.268c0.188-0.187,0.294-0.44,0.294-0.706c0-0.266-0.104-0.52-0.292-0.708
  l-8.983-9.018c-0.187-0.187-0.441-0.293-0.707-0.294c0,0-0.001,0-0.001,0c-0.265,0-0.519,0.104-0.706,0.292L24.027,13.587
  L10.759,0.267c-0.187-0.187-0.441-0.293-0.707-0.294c0,0-0.001,0-0.001,0c-0.265,0-0.519,0.104-0.706,0.292L0.328,9.248
  c-0.392,0.39-0.393,1.023-0.003,1.414L13.593,23.98L0.274,37.248c-0.391,0.39-0.392,1.023-0.003,1.414l8.983,9.018
  c0.187,0.188,0.441,0.293,0.707,0.294h0.002c0.265,0,0.518-0.104,0.705-0.292l13.318-13.267l13.268,13.318
  c0.195,0.196,0.452,0.294,0.708,0.294c0.255,0,0.511-0.097,0.706-0.292l9.017-8.982c0.392-0.39,0.393-1.022,0.003-1.414
  L34.421,24.02z"/>
</path></g>
</svg>
      </a>
      <h2>اهلا وسهلا بكم في مدونة علاء الغزالي </h2>
      <img class="success" src="https://d.top4top.net/p_922ioq810.png"/>
      <p>مدونة علاء الغزالي : مدونة تقنية تحتوى على مجموعة دروس ودورات فى مجالات تقنية مختلفة مثل دروس انظمة التشغيل والبرامج والالعاب وبلوجر وفوتوشوب وتطبيقات اندوريد والربح من الانترنت وغيره من الشروحات المميزة تاست مدونة علاء الغزالي عام 2015 وبفضل الله نالت اعجاب الكثير مؤسس المدونة علاء الغزالي مدون العراق توصل بجديد المواضيع
      <img class="success" src="https://b.top4top.net/p_922cimht0.png"/>
</p>
    </div>
  </div>
<style>
@import url(http://fonts.googleapis.com/css?family=Montserrat:700);
.button{
    direction: rtl;
  font: 100 12px tahoma,arial
}
.modal__background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: 0.10s;
  transition: 0.10s;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
    direction: rtl;
  font: 100 12px tahoma,arial
}
.modal__background:target {
  opacity: 1;
  pointer-events: auto;
}
.background {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  background: #243750;
  height: 15vh;
  width: 100vw;
}
.button {
  -webkit-transition: 0.10s;
  transition: 0.10s;
  background: #fff;
  border-radius: 4px;
  color: #FF0014;
  display: block;
  margin: auto;
  padding: 1rem;
  text-decoration: none;
}
.button:hover {
  background: #008cff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  color: #fff;
}
.modal__content {
  background: #fff;
  padding: 1rem;
  position: relative;
  z-index: 4;
}
@media screen and (max-width: 699px) {
  .modal__content {
    margin: 2rem;
  }
}
@media screen and (min-width: 700px) {
  .modal__content {
    margin: 4rem auto;
    max-width: 200px;
    min-height: 100px;
  }
}
.modal__content svg,
.modal__content path {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 15px;
  width: 15px;
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  fill: #C01818;
}
.modal__content svg:hover,
.modal__content path:hover {
  fill: #0c0c0c;
}
h2 {
  color: #008cff;
  font-family: tahoma,Montserrat,sans-serif;
  font-size: 20px;
  margin: 0rem 0 1rem;
  text-align: center;
}
.success {
  width: 100%;
}
</style></section>