السلام عليكم ورحمة الله وبركاته
اليوم موضوعنا جميل جدا حول برمجة Modal box بطريقة بسيطة بأستخدام الــ HTML , CSS , JS طريقة جدا سهلة
فالــ Modal box تستطيع استخدامه في موقعك لاظهار الاخطاء فيه او عمل صفحات تسجيل عضويات وتسجيل دخول عبر نافذة منبثقة Modal box او حتى عرض الرسائل التوجيهية في موقعك ...الخ
الشرح :
فقط انسخ والصق هذا الكود في صفحة html فارغة :
<!DOCTYPE html>
<html>
<head>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border-top: 8px solid #FFC107; width: 60%;
box-shadow: 0px 0px 25px #636363;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.close {
color: white;
background: #ffc107;
border: 2px solid rgba(255, 152, 0, 0.49);
border-radius: 3px;
padding: 5px 30px 5px 30px;
float: right;
font-family: sans-serif;
cursor: pointer;
box-shadow: 2px 2px 20px #fff;
transition: box-shadow 0.3s;
}
.close:hover,
.close:focus {
box-shadow: 2px 2px 20px #9e9e9e;
}
.modal-header {
padding: 2px 16px;
color: #616161;
margin-right: 5px;
margin-left: 5px;
border-bottom: 1px solid #a7a7a7;
}
.modal-body {padding: 20px; color :#616161;}
.modal-footer {
padding: 2px 16px;
color: #616161;
margin-right: 5px;
margin-left: 5px;
border-top: 1px solid #a7a7a7;
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn" style="padding: 10px;">Open The Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<h2>Title - header</h2>
</div>
<div class="modal-body">
<p>put here your content like images , text , links</p>
<p>or description or any thing you want...</p>
</div>
<div class="modal-footer">
<h3>Footer <span class="close">Close</span></h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
أما اذا كنتم تتسائلون كيف افهم الكود او طريقة التعديل عليه .. سهلة للغاية قمت بوضع تعليقات comments داخل الكود اسفل كل وسم باللغة الانجليزية فقط افهم الكود واعد كتابيته بمفردك لتكون قادرا على برمجة نافذة منبثقة Modal box وتطورها للافضل وحسب تصميمك.
هذا كل ما في الشرح .. موضوع بسيط للغاية اتمنى انكم استفدتم من هذا الشرح القاكم في دروس اخرى باذن الله الى اللقاء
برمجة نافذة منبثقة Modal box بطريقة بسيطة بأستخدام الــ HTML , CSS , JS
Reviewed by Munaf Aqeel Mahdi
on
1:03 PM
Rating:
Reviewed by Munaf Aqeel Mahdi
on
1:03 PM
Rating:
سيدي عقيل مع احترامي ،، أخدتها من W3schools وطورتها ،، أعتذر
ReplyDeleteنعم حبيبي .. هذا لانه فقط شرح .. واذا كنت حابب اعملك نافذة اطور وافضل من هذه مافي مشكلة .. اختصارا للوقت فقط
Deleteشكرا لمرورك اخي الحبيب
اريد تعملي نافذة منبثقة تواصل معي عبر الامايل
ReplyDeleteسلام عليكم انا درست html وليس كتر و نسيتها لان اختصاصي شبكة معوماتية نتمني تساعدني في تطوير مهاراتي في html ارجو تشوف رسالتي وشكرا لك
ReplyDelete