jQuery لإنشاء نافذة تحذير مع تأثير الشاشة العازلة مع دليل الشيفرةDEMΟ التحميل

هذا المثال يشرح كيفية استخدام jQuery لإنشاء نافذة منبثقة blockUI مع تأثير الشاشة العازلة.شاركه مع الجميع للاستفادة، وهو كالتالي:

أولاً، أرفق الكود:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <title>blockUI (النافذة المنبثقة)</title>
   <style type="text/css">
   #demo {
     width:100px;
     height:24px;
     text-align:center;
   }
   #displayBox{
     display:none;
   }
   </style>
 </head>
 <body>
   <button id="demo">انقر للنافذة المنبثقة</button>
   <div id="displayBox">
     هناك محتوى للنافذة المنبثقة !!!<br /><br /><br /><a href="javascript:void(0);" onclick="$.unblockUI();return false;" title="[#1#]">انقر لإغلاق</a>
   </div>
 </body>
 </html>
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="jquery.blockUI.js"></script>
 <script type="text/javascript">
 $(function(){
   $('#demo').click(function(){
     $.blockUI({
       message: $('#displayBox'),
       css: {
         width: '500px',
         height: '100px',
         backgroundColor: '#eee',
         border: '1px solid red',
         color: 'green',
         textAlign: 'center',
         cursor: 'default'
       }
     });
   });
 });
 </script>

شكل التشغيل كما يلي:

بيان التوضيح للمعلمات كما يلي:

message = المحتوى الذي يجب عرضه

css = نمط المحتوى المنبثق، حيث يجب كتابة الخصائص في شكل js، مثل background-color => backgroundColor

$.unblockUI() = إغلاق الشاشة المنبثقة

للحصول على كود المثال الكامل، انقر هناتحميل الموقع.

إضافةً إلى ذلك، يمكنك العثور على عنوان الموقع الرسمي: http://www.malsup.com/jquery/block/

بالإضافة إلى ذلك، يمكن للقراء المهتمين بمزيد من المعلومات حول jQuery التحقق من المقالات الخاصة بالموقع: 'تحليل تقنيات إدارة النوافذ jQuery'، 'تحليل تقنيات التمرير jQuery'، 'تحليل استخدام الأدوات المدمجة jQuery'، 'تحليل استخدام Ajax في jQuery'، 'تحليل تقنيات التعامل مع جدول البيانات jQuery'، 'تحليل تقنيات التوسيع jQuery'، 'تحليل تأثيرات مذهلة jQuery'، 'تحليل استخدام تأثيرات الحركة jQuery'، وتحليل استخدام ميزات التحقق jQuery'.

آمل أن تساعدك معلومات هذا المقال في تصميم برامج jQuery.

بيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات مملوكة للمساهمين، محتويات المشاركة تم توفيرها من قبل مستخدمي الإنترنت بشكل متعاوني وتحميلها، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل أي مسؤولية قانونية مرتبطة. إذا كنت قد وجدت محتويات مشبوهة بحقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' ب '@') للإبلاغ، وتقديم الدليل، وسيتم حذف محتويات التخلف الفعلية على الفور.

تعليمية الأساس

أعجبك