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