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

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

الكود:

<section class="background">
  <a href="#open-modal" class="button">افتح مابداخل الصندوق CSS</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"/>
</g>
</svg>
      </a>
      <h2>داخل الصندوق</h2>
      <img class="success" src="http://4.bp.blogspot.com/-WTds9bp82H0/VFLK-UHOe7I/AAAAAAAAAjc/Bi-dVaX3mr0/s1600/92252.png"/>
      <p>هنا تضع ماتريد داخل هذا الصندوق ( صورة - نص - كود - كل مايخطر في بالك ).</p>
    </div>
  </div>
<style>
@import url(http://fonts.googleapis.com/css?family=Montserrat:700);
.button{
    direction: rtl;
  font: 700 12px tahoma,arial
}
.modal__background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: 0.35s;
  transition: 0.35s;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
    direction: rtl;
  font: 700 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: #FF7300;
  height: 100vh;
  width: 100vw;
}
.button {
  -webkit-transition: 0.25s;
  transition: 0.25s;
  background: #fff;
  border-radius: 4px;
  color: #FF7300;
  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: 400px;
    min-height: 300px;
  }
}
.modal__content svg,
.modal__content path {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 25px;
  width: 25px;
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  fill: #bfbfbf;
}
.modal__content svg:hover,
.modal__content path:hover {
  fill: #0c0c0c;
}
h2 {
  color: #008cff;
  font-family: tahoma,Montserrat,sans-serif;
  font-size: 30px;
  margin: 0rem 0 1rem;
  text-align: center;
}
.success {
  width: 100%;
}
</style>