عند استخدام مربع الحوار Modal Bootstrap ، تحتاج إلى كتابة مربع الحوار HTML على الصفحة. إذا كان هناك العديد من الأماكن في صفحة تتطلب مربع حوار ، فهذا يعني أنك تحتاج إلى كتابة العديد من الأماكن ، والتي تشعر بالضيق الشديد. أنا لست معتادًا على طريقة مربع الحوار Modal Bootstrap ، لذلك قمت بتغليف وتوسيع بسيط ، وأضفت عنوانًا مخصصًا وعرضًا وارتفاعًا ، وعرضته في الوسط وفقًا للعرض والارتفاع.
الخصائص الافتراضية:
المعرف: "Modal" ، // pop-up id
العنوان: "مربع الحوار" ، // العنوان المنبثق
العرض: "600" ، // عرض نافذة popt-up ، ٪ غير مدعوم في الوقت الحالي
الارتفاع: "500" ، // ارتفاع النافذة الشهير ، لا يدعم ٪
الخلفية: صحيح ، // ما إذا كان الانسداد معروضًا ، فهو نفس مربع مشروط bootstrap الأصلي
لوحة المفاتيح: صحيح ، // ما إذا كان يجب تمكين مفتاح ESC للخروج ، فهو نفس مربع مشروط bootstrap الأصلي
عن بُعد: "" ، // تحميل عنوان URL عن بُعد ، تمامًا مثل مربع مشروط bootstrap الأصلي
Openevent: NULL ، // وظيفة رد الاتصال بعد فتح النافذة المنبثقة
CloseEvent: NULL ، // وظيفة رد الاتصال بعد إغلاق النافذة المنبثقة
Okevent: null // انقر فوق زر موافق لوظيفة رد الاتصال
كيفية استخدام:
1. تحديد من خلال سمة بيانات HTML-*
انسخ الرمز كما يلي: <a href = "#" data-remote = "test.html" data-mtitle = "modal1" data-id = "m1" data-width = "600" data-opevent = "ok ()"
2. تهيئة من خلال JS
$ (". mzdialog"). mzdialog () ؛
الأماكن والأخطاء غير السليمة ، إليك مجرد مرجع للتعلم ويمكنك تعديلها وتحسينها بنفسك
1. يحتوي المكون الإضافي على bootstrap-mzdialog على زرين فقط في الوقت الحالي. إلغاء وتأكيد ، وأزرار مخصصة لم يتم دعمها بعد. يمكنك تعديل التعليمات البرمجية المصدر وإضافة هذه الوظيفة.
2. يمكنك فقط استخدام طريقة بيانات HTML-لتحديدها. لا تدعم معلمات التكوين أثناء تهيئة JS. يمكنك تعديل الكود المصدر وتوسيع هذه الوظيفة بنفسك.
3. لا ينبغي استخدام الوزن والارتفاع.
4. لاحظ أن وظيفة رد الاتصال هنا يجب أن تكون بتنسيق سلسلة ، مثل Okevent: "OK ()". هنا ، الوظيفة المحددة بواسطة وظيفة OK نفسها ، تذكر تضمين () ؛
رمز المصدر JS:
بر ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- الخلفية: صحيح ، // ما إذا كان يتم عرض انسداد ، مثل لوحة مفاتيح مربع مربع Bootstrap الأصلية: صحيح ، // ما إذا كان مفتاح ESC ممكّنًا من الخروج ، وهو نفس مربع bootstrap الأصلي عن بُعد: Okevent: null // انقر فوق الزر "موافق" إلى وظيفة رد الاتصال} ؛ // window create dynamic var createialog = {init: function (opts) {var _self = this ؛ // نافذة إدراج ديناميكية var d = _self.dhtml (opts) ؛ $ ("الجسم"). إلحاق (د) ؛ var modal = $ ("#"+opts.id) ؛ // تهيئة Window Modal.modal (OPTS) ؛ // موقف حجم النافذة var h = modal.height ()-modal.find (". modal-header"). OUTERHEIGHT ()-modal.find (". modal-footer"). Outerheight ()-5 ؛ modal.css ({'margin-left': opts.width/2*-1 ، 'margin-top': opts.height/2*-1 ، 'top': '50 ٪'). modal // show window.modal ('show') // redene the window بعد إخفاء النافذة html .on ('Hidden' ، function () {modal.remove () ؛ $ (". modal-backdrop"). remove () ؛ if (opts.closeevent) {eval (opts.closeevent) ؛ if (opts.openevent) {eval (opts.openevent) ؛ } ، dhtml: function (o) {return '<div id = "'+o.id+'" rob = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true"> <viv> <button type = "button" data- dismiss = "modal" aria-hidden = "true" id = "mymodallabel"> '+o.title+' </h3> </viv> <viv> <p> التحميل ... </p> </fiv> <viv> <button data-dismiss = "modal" aria-hidden = "true"> إلغاء </button> تأكيد </button> </div> </div> ؛ }} ؛ إرجاع this.each (function () {$ (this) .click (function () {var opts = $ .extend ({} ، الافتراضات ، {id: $ (this) .ATTR ("data-ID") ، title: $ (this) .Attr ("data-mtitle") ، width: $ (this). الخلفية: $ (this) .ATTR ("data-backdrop") ، لوحة المفاتيح: $ (هذا) .ATTR ("لوحة البيانات") ، عن بُعد: $ (هذا) .ATTR ("data-remote") ، openevent: $ (this) .ATTR ("data-openevent") ، $: $ (هذا). Okevent: $ (هذا) } ؛ }) (jQuery) ؛ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.