السلام عليكم ورحمة الله وبركاته
النهاردة هقدملكوه درس عن طريقة عمل alert بشكل جميل باستخدام الjquery والcss , ارجو اعجباكم
هنا استخدمت الميدا تاج حتى يمكن قراءة اللغة العربية , و استخدمت سكريبت الjquery الموجود فى نفس الفولدر باسم jquery.js
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ALERT</title> <script type="text/javascript" src="jquery.js"></script> </head>
هنا فى ال body قمت بعمل div id='message' الذى سوف يحتوى على الرسالة (alert ) وجعلته مختفى -- display:none -- وايضا قمت بعمل div id="container" وبه وضعت نص وتحته الزر الذى سوف يظهر الرسالة (alert) عند الضغط عليه , ونرى هنا انه عند الضغط على الزر فإنه يشغل الدالة showNotice ويعطى لها الرسالة المرادة
<body>
<div id='message' style="display:none;">
<span>الرسالة</span>
<span id='message_text'></span>
</div>
<div id="container">
<br />
السلام عليكم ورحمة الله وبركاته , هذا اول درس اقوم بعمله لتعليم الجى كويرى والسى اس اس
<br />
<input type="button" value="Show" onclick="javascript:showNotice('هذه الرسالة سوف تختفى فى خلال 5 ثوانى');" />
<br />
<br />
</div>
</body>
</html>الكود التالى يكون موجود بين ال head tags , وهو الكود المسئول عن اظهار الرسالة واخفائوها فى 5 ثوانى والتى تساوى = 5000 ميللى ثانية , والدالة هنا تستقبل الرسالة فى متغير اسمه message وتضعه فى العنصر message_text
ولكن حتى الان هذا الdiv مختفى , والسطر الثانى هو المسئول عن اظهار ال div واخفائه بعد 5 ثوانى --- fadeIn للإظهار ---- delay تأجيل 5 ثوانى قبل القيام بالأمر التالى ----- fadeOut للإختفاء
<script language="javascript" type="text/javascript">
function showNotice(message) {
$("#message_text").html(message);
$("#message").fadeIn("slow").delay(5000).fadeOut("slow");
}
</script>وهذا هو الستيل المستخدم و يضع بين ال head tags , و إذا كان هناك سؤال فى الستيل ضعه هنا و سأقوم بالرد عليه إن شاء الله
<style>
#message {
font-family:Arial,Helvetica,sans-serif;
position:fixed;
top:0px;
right:0px;
width:20%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align:center;
font-weight:bold;
padding:10px 0px 10px 0px;
background-color:#ff6022;
color:#222;
}
#message span {
font-size:15px;
text-align: center;
width: 95%;
float:left;
}
#message_text{
color:#EEE;
}
#container{
text-align:center;
margin:0;
padding:0;
width:100%;
color:#EEE;
font:normal 18px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
background:#4A4D4D;
}
</style>