البوب مسج موبايل
وشعبية جدا بالنوافذ الحوار البوب يمكن مضافين على عرض الصفحة.
يمكن أن تستخدم النوافذ المنبثقة لعرض النصوص والصور، والخرائط، أو المحتويات الأخرى.
إنشاء البوب، والحاجة إلى استخدام <A> <div> العنصر. مضيفا-يختلط البيانات = "المنبثقة" الخاصية على عنصر <A>، <div> عنصر لإضافة بيانات دور = "المنبثقة" السمة. ثم نحدد هوية ل<div>، ثم قم بتعيين قيمة href <A> <div> هوية محددة. <div> المحتوى هو المحتوى عرض البوب.
ملاحظة: <div> البوب وانقر <A> رابط يجب أن يكون على نفس الصفحة.
أمثلة
<div-دور البيانات = "المنبثقة " معرف = "myPopup">
<P> هذا هو البوب بسيط </ P>
</ div>
محاولة »
إذا كنت بحاجة إلى إضافة حشوة إلى الخارج ومن البوب يمكن أن تضيف "، واجهة المستخدم المحتوى" الفئة في <div> في:
إغلاق الإطار المنبثق
افتراضيا، ثم النقر البوب خارج المنطقة أو اضغط على المفتاح "خروج" لإغلاق النوافذ. إذا كنت لا ترغب في الاستفادة من منطقة خارج البوب إغلاق الإطار المنبثق يمكن أن تضيف = "كاذبة" السمة البيانات dismissible في المضافة (غير مستحسن). يمكنك أيضا إضافة زر إغلاق على البوب، وذلك باستخدام يختلط البيانات = زر "العودة" على الممتلكات، وذلك من خلال أسلوب للسيطرة على الموقف الزر.
| وصف | أمثلة |
|---|---|
| زر الإغلاق على الجانب الأيمن | محاولة |
| زر الإغلاق على اليسار | محاولة |
| باستخدام خاصية البيانات dismissible | محاولة |
المواقع البوب
افتراضيا، سيظهر بالنوافذ مباشرة فوق انقر على العنصر، إذا كنت بحاجة للسيطرة على الموقف البوب، يمكنك استخدام البيانات الموقف أن تنسب لفتح نقرات البوب على الرابط.
السيطرة على مواقع البوب في ثلاث طرق:
| قيمة الممتلكات | وصف |
|---|---|
| موقف البيانات ل= "نافذة" | بالنوافذ عرض في مركز النافذة |
| موقف البيانات ل= "# myId" | بالنوافذ ظهور العناصر المعروفة #ID |
| موقف البيانات ل= "الأصل" | افتراضي. انقر على العناصر عرض البوب. |
أمثلة
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo"> معرف = " تجريبي" </A>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin"> المنشأ </A>
محاولة »
انتقال
افتراضيا، البوب أي تأثير الانتقالية. إذا كنت تريد أن تتمكن من إضافة تأثيرات الانتقال (عبر الانتقالية البيانات = "قيمة" السمة مسج موبايل الانتقالية ):
جميع حالات الانتقال من آثار
محاولة »
الاتجاه البوب حدودية صغيرة
إذا كنت بحاجة إلى إضافة اتجاه البوب القليل من الحدود، يمكنك استخدام خاصية السهم البيانات وتحديد قيمة "ل" (يسار)، "ر" (أعلى)، "ص" (على اليمين) أو "ب" (أسفل):
أمثلة
<div-دور البيانات = "المنبثقة " معرف = "myPopup" الطبقة = "واجهة المستخدم المحتوى" السهم البيانات = "ل">
<P> غادر باتجاه الحدود. </ P>
</ div>
محاولة »
الحوار البوب
يمكنك البوب إنتاجها على شكل مربع القياسية الحوار (الرأس، ومحتويات علامة أسفل):
أمثلة
<div-دور البيانات = "المنبثقة" معرف = "myPopupDialog">
<div-دور البيانات = "رأس"> <h1> تحليل النص رأس .. </ H1> </ div>
<div-دور البيانات = فئة "الرئيسية" = "واجهة المستخدم المحتوى"> <p> وبعض النص .. </ P> <a href="#"> الروابط .. </A>
<div-دور البيانات = "تذييل"> <H1> في الجزء السفلي من النص .. </ H1> </ div>
</ div>
محاولة »
صورة البوب
يمكنك عرض الصورة في البوب:أمثلة
على <img SRC = "/ الفسفور الابيض بين المحتوى / الإضافات / 2015/10 / w3big.jpeg" بديل = "w3big" على غرار = "العرض: 200px؛"> </A>
<div-دور البيانات = "المنبثقة" معرف = "myPopup">
على <img SRC = "/ الفسفور الابيض بين المحتوى / الإضافات / 2015/10 / w3big.jpeg" على غرار = "العرض: 800px؛ الطول: 400px؛" بديل = "w3big">
</ div>
محاولة »
تغطية البوب الخلفية
يمكنك استخدام خصائص تراكب موضوع البيانات بعد البوب إضافة لون الخلفية.
افتراضيا، تغطي لون الخلفية شفافة. باستخدام بيانات تراكب موضوع = "أ" لإضافة خلفية الخفيفة واستخدام البيانات تراكب موضوع = "ب" إضافة غطاء الظلام الخلفية:
أمثلة
<div-دور البيانات = "المنبثقة " معرف = "myPopup"، تراكب موضوع البيانات = "ب">
<P> ورائي هناك خلفية داكنة. </ P>
</ div>
محاولة »
العامة بالنوافذ صورة الخلفية في كثير من الأحيان تراكب:
أمثلة
على <img SRC = "/ الفسفور الابيض بين المحتوى / الإضافات / 2015/10 / w3big.jpeg" بديل = "w3big" على غرار = "العرض: 200px؛"> </A>
<div-دور البيانات = "المنبثقة " معرف = "myPopup"، تراكب موضوع البيانات = "ب">
على <img SRC = "/ الفسفور الابيض بين المحتوى / الإضافات / 2015/10 / w3big.jpeg" على غرار = "العرض: 800px؛ الطول: 400px؛" بديل = "w3big">
</ div>
محاولة »
ملاحظة: في الفصل التالي، وسوف تتعلم كيفية استخدام النماذج في موسيقى البوب.