مربع مشروط مؤسسة
يتم عرض مربع مشروط في البوب رأس الصفحة.
يمكننا أن نكون على عنصر الحاوية (مثل <div id="myModal" ) يستخدم هوية فريدة من نوعها، وإضافة .reveal-modal الطبقات و data-reveal سمة لإضافة مربع مشروط. يمكننا استخدام على أي عنصر من عناصر data-reveal-id=" id " " السمة علي صندوق مفتوح مشروط. معرف الهوية يجب أن تكون متسقة مع الحاوية (الأمثلة "myModal").
إذا كنت تريد الضغط على منطقة خارج منطقة الجزاء لإغلاق مربع مشروط مشروط. يمكنك إغلاق مربع مشروط زر <a> إضافة تسميات .close-reveal-modal الطبقة.
ملاحظة: شريط التمرير يتطلب جافا سكريبت. لذلك تحتاج إلى تهيئة oundation شبيبة:
أمثلة
<نوع زر = الطبقة "زر" = "زر" بيانات تكشف معرف = "myModal"> انقر لفتح مشروط </ زر>
<! - والمحتوى مشروط ->
<شعبة معرف = "myModal" الطبقة = "تكشف-مشروط"، تكشف البيانات>
<H2> العنوان في مشروط. < / H2>
<P> بعض النص في مشروط . </ P>
<P> بعض النص في مشروط . </ P>
الطبقة <A = "close-reveal -modal"> ومرات؛ </ A>
</ div>
<! - تهيئة مؤسسة شبيبة ->
<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .foundation ()؛
})
</ script>
محاولة »
مشروط حجم مربع
يمكنك إضافة الفئات التالية على الحاوية مربع مشروط لضبط حجم مربع الوسائط:
-
.tiny: العرض 30٪ -
.small: 40٪ العرض -
.medium: 60٪ العرض -
.large: العرض 70٪ -
.xlarge: العرض 95٪ -
.full: عرض 100٪ وارتفاع
ملاحظة: الافتراضية على الكمبيوتر اللوحي، الكمبيوتر المحمول، أجهزة الكمبيوتر الشخصي هو 80٪ من العرض على الشاشة الصغيرة هي عرض 100٪.
أمثلة
محاولة »
مربع مشروط جزءا لا يتجزأ من
يمكنك تضمين مربع مشروط في مربع مشروط، يمكنك إضافة زر الزناد جديد على مربع مشروط الأول. يجب عليك تعيين معرف فريد لمربع مشروط جزءا لا يتجزأ من:
أمثلة
<A أ href = "#" الطبقة = "button" data-reveal-id = "myModal"> أنقر لفتح مشروط </ A>
<! - ومشروط أولا ->
<شعبة معرف = "myModal" الطبقة = "تكشف-مشروط"، تكشف البيانات>
<H2> أولا مشروط </ H2 >
<P> بعض النص .. </ P>
<P> <a أ href = "#" data-reveal-id = "secondModal" الطبقة = "button"> المفتوحة الثانية مشروط </ أ> </ P>
الطبقة <A = "close-reveal -modal"> ومرات؛ </ A>
</ div>
<! - ومشروط ثانيا ->
<شعبة معرف = "secondModal" الطبقة = "تكشف-مشروط"، تكشف البيانات>
<H2> تادا! الثانية مشروط < / H2>
<P> بعض النص .. </ P>
الطبقة <A = "close-reveal -modal"> ومرات؛ </ A>
</ div>
محاولة »
سوف مربع مشروط الثاني محل مربع مشروط الأول. إذا كنت ترغب في فتح مربع مشروط الثاني دون إغلاق مربع مشروط الأول. يمكنك إضافة على مربع مشروط الثاني data-options="multiple_opened:true;" ،" الخصائص:
أمثلة
محاولة »