شرح اضافة انبثاق صندوق للمدونة عند الضغط على زر

السلام عليكم ورحمة الله وبركاته
هناك العديد من الخاصيات التي قد يحتاجها المبرمج عند تصميم موقع ما كانبثاق صندوق او مثل هذه الامور في تصاميمه وهناك قد يحتاج لهذا الكود الموجود في الاسفل مع تثبيته مع اكواد 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibBewjp81cxKeadpnUiiXVasMoXcNk_0-KGzq0q-b0hNo9ZaJnUpTNSL8oXywDHcxoKU7J7oomvWCpYh4DVy9GMMkS_BvuOrPvD96VKzHDW21wRsCczx_TRzfDnRAOL9U7n1EhpgcHWZ1R/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>

هل استفذت من الشرح ؟ ساعدنا بنشره اذا مشاركة

Tweet

✚

كاتب الموضوع: محمد الوهابي

محمد الوهابي، من مواليد 1994 من المغرب،الهواية، التدوين الالكتروني، مهتم كثيرا بالتكنولوجيا، وابحث دائما عن كل ماهو جديد لتقديم شروحات ومقالات مفيدة وذالك للارضاء الجميع وتحقيق الافضل.

هناك ايضا

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