يعد استخدام Windows المنبثقة لعرض رسائل قصيرة على صفحة الويب على ما يرام ، على الرغم من أنه ليس ودودًا للغاية. ومع ذلك ، فإن النوافذ المنبثقة تتعلق بالمعلومات الطويلة مثل شروط خدمة الموقع. يتطلب ذلك استخدام شيء يسمى Modal Box Modal وتضمين Textarea مربع نص متعدد الخط في المربع المشروط.
من الصعب للغاية كتابة رمز JavaScript يدويًا ، ولكن من الأسهل الكتابة باستخدام bootstrap.
1. الأهداف الأساسية
هناك صفحة ويب مع ارتباط تشعبي وزر:
سوف النقر عليها فتح مربع مشروط كما هو موضح أدناه. سيتم إغلاق المربع المشروط هذا ، النقر فوق الزر X في الزاوية اليمنى العلوية والتأكيد أدناه.
2. عملية الإنتاج
1. لأنك تحتاج إلى استخدام Bootstrap ، يمكنك تنزيل المكونات على الموقع الرسمي (انقر لفتح الرابط). إصدار bootstrap المستخدم في بيئة الإنتاج (انقر لفتح الرابط). Bootstrap3 غير متوافق مع 2. يوصى باستخدام bootstrap3 مباشرة وفقًا لوثائق التطوير الخاصة به. تم تصنيع هذه المقالة أيضًا على أساس bootstrap3. في الوقت نفسه ، يجب دعم تأثير JavaScript الذي توفره Bootstrap3 بواسطة JQuery1.11 (انقر لفتح الرابط). يمكنك تنزيل jQuery1.11 (انقر لفتح الرابط) متوافق مع المتصفح القديم IE6 (انقر لفتح الرابط) من موقع jQuery الرسمي ، بدلاً من jQuery2 (انقر لفتح الرابط) في المتصفح القديم IE6. بعد التنزيل ، قم بتكوين دليل الموقع. فك ضغط Bootstrap3 مباشرة إلى دليل الموقع ، ووضع jQuery-1.11.1.js في دليل JS ، أي نفس الدليل مثل bootstrap.js. هيكل مجلد الموقع تقريبًا على النحو التالي:
2. رمز صفحة الويب هذه كما يلي ، ويتم تحليل الشظايا التالية:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> modal box </title> <meta name = content = "width = width device ، scal-scale = 1.0 ، ster-scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jquery-1.1.1.js src = "js/bootstrap.js"> </script> </head> <body> <p> <a data-toggle = "modal" target = "#mymodal"> اتفاقية الخدمة </a> </p> <p> <p> <button type = "button" data-toggle = "modal" target = id = "mymodal" rob = "dialog"> <viv> <viv> <viv> <button type = "button" data-dismiss = "modal"> <span> × </span> </utton> <h4 id = "mymodallabel" تأثير. شروط خدمة هذه الاتفاقية لها تأثير قانوني. شروط خدمة هذه الاتفاقية لها تأثير قانوني. شروط خدمة هذه الاتفاقية لها تأثير قانوني. </dextarea> </p> </viv> <viv> <p align = "center"> <button type = "button" data-dismiss = "modal"> ok </p> </p> </viv> </viv> </viv> </viv> </viv>
(1) <الرأس> جزء
<head> <!-ترميز الصفحة-> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> مربع مشروط </title> <!-طلب صفحة الويب هذه للتكيف تلقائيًا مع شاشة PC ، الجهاز اللوحي ، والهاتف المحمول وغيرها من الأجهزة-> <meta name = content = "width = width device ، scale-scale = 1.0 ، ster-scalable = no"> <!-يتطلب هذا المثال الدعم من ثلاثة مكونات إضافية خارجية-> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen" <script type = "text/javaScript" src = "js/bootstrap.js"> </script> </head>
(2) الروابط والأزرار المقدمة أصلاً على صفحة الويب
<p> <!-data-toggle = "modal" target = "#mymodal" يتطلب المربع المشروط المفتوح لـ mymodal-> <a data-toggle = "modal" data-target = "#mymodal" اتفاقية الخدمة </a> </p> <p> <! -> <button type = "button" data-toggle = "modal" data-target = "#mymodal"> انقر هنا لقراءة اتفاقية الخدمة </p>
(3) جزء مربع مشروط
أساسيات الصناديق المشروطة هي كما يلي:
لذلك ، تم العثور على الرمز التالي:
<!-class = "Modal Fade" يتطلب فتح المربع المشروط مع تأثير تأثير الرسوم المتحركة ، فئة = "Modal" على ما يرام ، ولكن يتم فتحها فجأة. id = "mymodal" يردد الارتباط التشعبي أعلاه وزره-> <div id = "mymodal" rob = "dialog"> <viv> <!-يجب إجراء تخطيط مربع الوسيط بعد محتوى مشروط. -> <viv> <viv> <!-هذا هو جزء العنوان من المربع الوسيط ، مع فاصلة فاصلة من × وحرف النقل مع × ، والتي هي أساسا زر إغلاق-> <button type = "button" data-dismiss = "modal"> <span> × </span> </button> <! <viv> <!-هذا هو الجزء الرئيسي من المربع الوسيط ، والذي يتم تضمينه مع مربع نص للقراءة فقط مع عدد من الأسطر من 3. يتمحور مربع النص في الجزء الرئيسي من المربع الوسيط. لا بأس بدون مربع نص ، ولكن سيتم تقديم المحتوى إلى المستخدم في وقت واحد. فلماذا لا يطفئ النافذة فقط؟ -> <p align = "center"> <textarea rows = 3 readOnly = "true" /> شروط خدمة هذه الاتفاقية فعالة من الناحية القانونية. شروط خدمة هذه الاتفاقية لها تأثير قانوني. شروط خدمة هذه الاتفاقية لها تأثير قانوني. شروط خدمة هذه الاتفاقية لها تأثير قانوني. </dextarea> </p> </viv> <viv> <!-هذا هو ذيل المربع الوسيط ، ويتم وضع زر موافق مركزي-> <p align = "center"> <button type = "button" data-dismiss = "modal"> ok </button> </p>
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.