منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

مُساهمة من طرف JAR7 في 08/03/16, 06:40 pm

جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

حصرى
عند الضغط على زر الدخول بشريط الاشعارات يتم ظهور صندوق الدخول البنبثق وبشكل جذاب
وكمان له شكلين
الشكل الاسود والشكل الابيض

الجافا فى جميع الصفحات
الشكل الابيض


الرمز:

(function() {
  var lang = {
    title : 'الرجاء إدخال اسم المستخدم و كلمة المرور لـ تسجيل الدخول..',
    username : 'اسم المستخدم : ',
    password : 'كلمة السر : ',
    automatic : ' ادخلني بشكل آلي عند زيارتي مرة اخرى : ',
    login : 'الدخول',
    register : 'التسجيل',
    forgot : 'لقد  نسيت  كلمة  السر',
   
    redirect : window.location.href // page the user is redirected to upon login
  };
 
   // الشكل الابيض
  document.write('<style type="text/css">#fa_quick_login{color:#333;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#FFF;border:1px solid #CCC;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arr10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#069}#fa_quick_login a.gensmall:hover{color:#333}#fa_quick_login input{color:#333;background:#FFF;border:1px solid #CCC;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#39C}#fa_quick_login input:focus{border-color:#333;outline:0}#fa_quick_login input.mainoption{color:#39C;border:1px solid #39C;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:#FFF;background:#39C}#fa_quick_login input.mainoption:focus{color:#FFF;background:#8B5;border-color:#8B5}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#333;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');
    // نهاية الشكل


  $(function() {
    if (!_userdata.session_logged_in && _userdata.activate_toolbar) {
      var container = document.createElement('DIV');
      container.id = 'fa_quick_login';
      container.style.display = 'none';
      container.innerHTML = '<form action="/login" method="post" name="form_login"><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="4" align="center"><tbody><tr><th colspan="3" class="thHead" nowrap="nowrap" height="25">' + lang.title + '</th></tr><tr><td width="100%" align="center" class="row1"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="row1 align_gauche"><table width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="align_droite" width="50%"><span class="gen">' + lang.username + '</span></td><td width="50%"><input type="text" name="username" value="" size="25" maxlength="40"></td></tr><tr><td class="align_droite"><span class="gen">' + lang.password + '</span></td><td><input type="password" name="password" size="25" maxlength="32"></td></tr><tr align="center"><td colspan="2"><span class="gen">' + lang.automatic + '<input type="checkbox" name="autologin" checked="checked"></span></td></tr><tr align="center"><td colspan="2"><input type="hidden" name="redirect" value="' + lang.redirect + '"><input type="hidden" name="query" value=""><input type="hidden" name="tt" value="1"><input class="mainoption" type="submit" name="login" value="' + lang.login + '"></td></tr><tr align="center"><td colspan="2"><br><span class="gensmall"><a class="gensmall" href="/register">' + lang.register + '</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="gensmall" href="/profile?mode=sendpassword">' + lang.forgot + '</a></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></form>';
      document.body.appendChild(container);
 
      $(function() {
        var right = document.getElementById('fa_right');
 
        if (right) {
          right.firstChild.onclick = function() {
            var login = document.getElementById('fa_quick_login'), offset = this.getBoundingClientRect(), loffset;
 
            if (login) {
              if (/none/.test(login.style.display)) {
                login.style.display = '';
               
                loffset = login.getBoundingClientRect();
                login.style.top = offset.top + 30 + 'px';
                login.style.left = offset.left - ((loffset.right - loffset.left) - (offset.right - offset.left)) + 'px';
               
                login.getElementsByTagName('FORM')[0].username.focus();
                this.className += ' fa_login_actif';
              } else {
                login.style.display = 'none';
                this.className = this.className.replace(/fa_login_actif/, '');
              }
            }
           
            return false;
          };
        }
      });
    }
  });
}());


الشكل الاسود
صوره له

https://i84.servimg.com/u/f84/19/42/07/18/ou10.png


الكود
الرمز:

(function() {
  var lang = {
    title : 'الرجاء إدخال اسم المستخدم و كلمة المرور لـ تسجيل الدخول..',
    username : 'اسم المستخدم : ',
    password : 'كلمة السر : ',
    automatic : ' ادخلني بشكل آلي عند زيارتي مرة اخرى : ',
    login : 'الدخول',
    register : 'التسجيل',
    forgot : 'لقد  نسيت  كلمة  السر',
  
    redirect : window.location.href // page the user is redirected to upon login
  };
 
    // الشكل الاسود
  document.write('<style type="text/css">#fa_quick_login{color:#FFF;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#333;border:1px solid #111;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arrd10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#CCC}#fa_quick_login a.gensmall:hover{color:#FFF}#fa_quick_login input{color:#FFF;background:#111;border:1px solid #444;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#666}#fa_quick_login input:focus{border-color:#999;outline:0}#fa_quick_login input.mainoption{color:#999;border:1px solid #999;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:#333;background:#999}#fa_quick_login input.mainoption:focus{color:#333;background:#FFF;border-color:#FFF}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#FFF;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');
    // نهاية الشكل


  $(function() {
    if (!_userdata.session_logged_in && _userdata.activate_toolbar) {
      var container = document.createElement('DIV');
      container.id = 'fa_quick_login';
      container.style.display = 'none';
      container.innerHTML = '<form action="/login" method="post" name="form_login"><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="4" align="center"><tbody><tr><th colspan="3" class="thHead" nowrap="nowrap" height="25">' + lang.title + '</th></tr><tr><td width="100%" align="center" class="row1"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="row1 align_gauche"><table width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="align_droite" width="50%"><span class="gen">' + lang.username + '</span></td><td width="50%"><input type="text" name="username" value="" size="25" maxlength="40"></td></tr><tr><td class="align_droite"><span class="gen">' + lang.password + '</span></td><td><input type="password" name="password" size="25" maxlength="32"></td></tr><tr align="center"><td colspan="2"><span class="gen">' + lang.automatic + '<input type="checkbox" name="autologin" checked="checked"></span></td></tr><tr align="center"><td colspan="2"><input type="hidden" name="redirect" value="' + lang.redirect + '"><input type="hidden" name="query" value=""><input type="hidden" name="tt" value="1"><input class="mainoption" type="submit" name="login" value="' + lang.login + '"></td></tr><tr align="center"><td colspan="2"><br><span class="gensmall"><a class="gensmall" href="/register">' + lang.register + '</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="gensmall" href="/profile?mode=sendpassword">' + lang.forgot + '</a></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></form>';
      document.body.appendChild(container);
 
      $(function() {
        var right = document.getElementById('fa_right');
 
        if (right) {
          right.firstChild.onclick = function() {
            var login = document.getElementById('fa_quick_login'), offset = this.getBoundingClientRect(), loffset;
 
            if (login) {
              if (/none/.test(login.style.display)) {
                login.style.display = '';
              
                loffset = login.getBoundingClientRect();
                login.style.top = offset.top + 30 + 'px';
                login.style.left = offset.left - ((loffset.right - loffset.left) - (offset.right - offset.left)) + 'px';
              
                login.getElementsByTagName('FORM')[0].username.focus();
                this.className += ' fa_login_actif';
              } else {
                login.style.display = 'none';
                this.className = this.className.replace(/fa_login_actif/, '');
              }
            }
          
            return false;
          };
        }
      });
    }
  });
}());

JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2193
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

مُساهمة من طرف منصورة في 08/03/16, 07:25 pm

شكرا لكي على الكود الجميل
جزاك الله الف خير على كل ما تقدميه لهذا المنتدى
ننتظر ابداعاتك الجميلة بفارغ الصبر

منصورة
عضو نشيط


الجنس : انثى
عدد المساهمات : 112
التقييم : 20
تاريخ الميلاد : 01/01/1963
تاريخ التسجيل : 08/03/2016
العمر : 53
الموقع : منصورة والجميع
العمل/الترفيه : المطالعة
المزاج : الحمد لله والشكر لله

معاينة صفحة البيانات الشخصي للعضو http://manssora.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

مُساهمة من طرف JAR7 في 08/03/16, 08:42 pm

منور الموضوع



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2193
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

مُساهمة من طرف Okay ! في 09/03/16, 06:14 pm

يعطيك العافيه عع الطرحح المميز 



Okay !
عضو نشيط


الجنس : انثى
عدد المساهمات : 22
التقييم : 12
تاريخ الميلاد : 28/04/2000
تاريخ التسجيل : 09/03/2016
العمر : 16
الموقع : ككفآِيهه إنني ععشتت ف دآرنن تتآريخخهآ قآبوؤسس ء :$
العمل/الترفيه : قائدةة كتيبة ة ألقصصفف ألججوي _متقآعدهه !
المزاج : مآفي احد يششتاقلكك كثري أنآ $: ~

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

مُساهمة من طرف Black Love في 20/03/16, 09:32 pm

كود اكثر من رآئع ششكرآ ~~♥



Black Love
عضو نشيط


الجنس : ذكر
عدد المساهمات : 96
التقييم : 15
تاريخ التسجيل : 19/03/2016
الموقع : المغرب ~~♥
العمل/الترفيه : مصمم جرافيك و مككود وسسباح ايضا هع ♥
المزاج : ~~ ححلو النهردهه هع ♥

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

مُساهمة من طرف Mr.Yakoub في 16/04/16, 09:28 pm

كالعادة ابداع رائع 

وطرح يستحق المتابعة

شكراً لك 

بانتظار الجديد القادم
دمت بكل خير

Mr.Yakoub
الاشراف العام


الجنس : ذكر
عدد المساهمات : 548
التقييم : 3
تاريخ التسجيل : 28/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

مُساهمة من طرف المصمم الليلي في 22/05/16, 02:42 am

سلمت الايادي الطيبة ........
في الابداع والتواصل المستمر
في نشر الجديد والمفيد
أُحييك على اختيارك الرائع والمميز..
تحياتي لك  

المصمم الليلي
عضو نشيط


الجنس : ذكر
عدد المساهمات : 192
التقييم : 8
تاريخ التسجيل : 27/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو http://arab-ibda3.0wn0.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

مُساهمة من طرف V.I.P في 21/06/16, 01:37 am

بارك الله فيك

V.I.P
عضو نشيط


الجنس : ذكر
عدد المساهمات : 80
التقييم : 11
تاريخ التسجيل : 03/03/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

مُساهمة من طرف Abdallah.BeraYda في 26/06/16, 07:59 pm

السسلآلآم عليككم ورحمة الله وبركاته...
~يسعد ايامكك ..
ماشاءالله عليك جدا جميله المشاركه
الله يكتب أجرك ويارب تكون في موآزين اعمالك
ماقصرت على هالحضور بجد أبدعت..
جهود مبارك جزاك الله خيرا
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير

Abdallah.BeraYda
عضو نشيط


الجنس : ذكر
عدد المساهمات : 272
التقييم : 19
تاريخ التسجيل : 25/03/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

كاتب هذه المساهمة مطرود حالياً من المنتدى - معاينة المساهمة

رد: جافا سكربت صندوق الدخول بشريط الاشعارات بشكلين الابيض والاسود

مُساهمة من طرف Judy في 19/07/16, 07:37 am

السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي

Judy
عضو نشيط


الجنس : انثى
عدد المساهمات : 364
التقييم : 15
تاريخ التسجيل : 23/04/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى