في السابق ، شرحنا استخدام علامة التبويب bootstrap. اليوم سوف نتعرف على استخدام النوافذ المنبثقة النموذجية في bootstrap.
تأثير:
شفرة:
<input id = "btntext" type = "button" value = "إضافة مكون النص" data-toggle = "modal" data-target = "#mymodal" href = "../ sysmanage/zujianmanage.aspx"/> <! Data-dismiss = "modal"> × </button> <h3 id = "mymodallabel"> رأس MODAL </h3> </viv> <viv> </viv>
الأمر بسيط للغاية ، هذا كل شيء.
ملاحظة: تشير خاصية تهدف البيانات إلى معرف النموذج ، لذلك انقر فوق الزر وسيظهر النموذج.
بالطبع يمكنك أيضًا استخدام JS للسيطرة عليه.
الرمز التالي:
عرض: $ ('#mymodal'). modal ('show') ؛
إخفاء: $ ('#mymodal'). modal ('Hide') ؛
التبديل: $ ('#mymodal'). Modal ('Toogle') ؛
الحدث: $ ('#mymodal'). on ('Hidden' ، function () {// افعل شيئًا ...}) ؛
ملاحظة: لقد استخدمت سمة HREF هنا ، والتي تتمثل في السماح للنموذج عن بُعد بعنوان URL. بالطبع ، يمكنك كتابة ما تريده مباشرة في الجسم والجسم.
إذا نظرت إلى بنية DIV للنموذج بعناية ، فسوف تفهم أن الجسم النموذج يمثل المحتوى ورئيس النموذج هو الرأس. لذلك إذا كنت ترغب في إضافة زرين في الأسفل ، فيجب عليك استخدام الكود التالي.
<viv> <a href = "#"> إغلاق </a> <a href = "#"> حفظ </a> </viv>
ملاحظة: إذا كنت ترغب في تعيين عرض النموذج ، فيجب عليك إضافة التصميم. هو وضع النموذج في كتلة الكود أدناه وتعيين عرض النموذج. النمط = "العرض: 500px". بالمناسبة ، لا يمكنك وضعه في الفصل باستخدام نمط Span. .
<viv> </viv>
ما سبق هو استخدام مربع Bootstrap Model المنبثق الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!