معهد ترايدنت TRAIDNT FORUM
يا ضيفنا الكريم سلام الله عليك
نعلم جميعاً ان المنتدي مكان لتبادل المنفعة ولكي نفيد ونستفيد ..
من فضلك ساهم بقدر المستطاع واجعل دورك فعال بالمنتدي على الأقل قم بشكر الشخص الذي إستفدت من موضوعه ..
فنحن نعمل جميعاً على نشر الفائدة فشارك في هذا العمل ولا تكتفي بالمشاهدة فقط ..

انضم إلى المنتدى ، فالأمر سريع وسهل

معهد ترايدنت TRAIDNT FORUM
يا ضيفنا الكريم سلام الله عليك
نعلم جميعاً ان المنتدي مكان لتبادل المنفعة ولكي نفيد ونستفيد ..
من فضلك ساهم بقدر المستطاع واجعل دورك فعال بالمنتدي على الأقل قم بشكر الشخص الذي إستفدت من موضوعه ..
فنحن نعمل جميعاً على نشر الفائدة فشارك في هذا العمل ولا تكتفي بالمشاهدة فقط ..
معهد ترايدنت TRAIDNT FORUM
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.
اذهب الى الأسفل
TRAIDNT
TRAIDNT
مدير المنتدى
 مدير المنتدى
المساهمات : 95
نقاط : 269
السٌّمعَة : 0
https://www.traidnt-ar.com

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

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



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

الكود:
<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>
الرجوع الى أعلى الصفحة

سجل دخولك أو سجل عضوية جديدة لتستفيد أكثر من المنتدى!

سجل دخولك أو سجل عضوية جديدة لتحصل على المزيد من المنتدى!

تسجيل الدخول

إذا كان لديك حساب ، الرجاء تسجيل الدخول

تسجيل الدخول
تسجيل عضوية جديدة

إنشاء حساب جديد في المنتدى مجاني تمامًا

قم بالتسجيل الآن
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)