آموزش پلاگین Modal در بوت استرپ
4 سال پیش
آموزش پلاگین Modal در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پلاگین Modal در بوت استرپ خواهیم پرداخت.
modal یک پنجره کودک است که روی پنجره اصلی آن لایه بندی شده است. به طور معمول ، هدف نمایش محتوا از یک منبع جداگانه است که می تواند بدون خارج شدن از پنجره والد، مقداری تعامل داشته باشد. پنجره های کودک می توانند اطلاعات، تعامل یا موارد دیگر را ارائه دهند.
اگر می خواهید این قابلیت پلاگین را به صورت جداگانه وارد کنید، به modal.js نیاز خواهید داشت. در غیر این صورت، همانطور که در درس بررسی اجمالی پلاگین های بوت استرپ ذکر شده است، می توانید bootstrap.js یا minst bootstrap.min.js را در آن قرار دهید.
استفاده
می توانید محتوای پنهان پلاگین modal را تغییر دهید –
- از طریق مشخصه های داده – برای تعیین یک حالت خاص (با id = “شناسه”) برای ضامن.
- از طریق JavaScript – با استفاده از این روش می توانید یک modal با id = “identifier” را با یک خط JavaScript فراخوانی کنید –
|
1 |
$('#identifier').modal(options) |
مثال
یک مثال پنجره حالت ثابت در مثال زیر نشان داده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<h2>Example of creating Modals with Twitter Bootstrap</h2> <!-- Button trigger modal --> <button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal"> Launch demo modal </button> <!-- Modal --> <div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true"> <div class = "modal-dialog"> <div class = "modal-content"> <div class = "modal-header"> <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"> &times; </button> <h4 class = "modal-title" id = "myModalLabel"> This Modal title </h4> </div> <div class = "modal-body"> Add some text here </div> <div class = "modal-footer"> <button type = "button" class = "btn btn-default" data-dismiss = "modal"> Close </button> <button type = "button" class = "btn btn-primary"> Submit changes </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> |
جزئیات کد قبلی –
برای فراخوانی پنجره modal، باید نوعی trigger داشته باشید. می توانید از یک دکمه یالینک استفاده کنید. در اینجا ما از یک دکمه استفاده کرده ایم.
اگر به کد بالا نگاه کنید، می بینید که در تگ <button> ، data-target = “#myModal” هدف مدال است که می خواهید در صفحه بارگیری کنید. این کد به شما امکان می دهد چندین حالت مختلف در صفحه ایجاد کنید و سپس برای هر یک از آنها عوامل مختلفی داشته باشید. اکنون ، برای اینکه روشن شود ، شما چند حالت را همزمان بارگیری نمی کنید ، اما می توانید تعداد زیادی را در صفحات بارگیری کنید تا در زمان های مختلف بارگیری شوند.
دو کلاس وجود دارد که باید به آنها توجه کنید –
- اولین حالت modal. است که به سادگی شناسایی محتوای <div> به عنوان یک حالت معین است.
- و دوم کلاس fade. است. وقتی مودال تغییر حالت می دهد باعث محو شدن محتوا می شود.
- aria-labelledby = “myModalLabel” ، عنوان را به عنوان اصلی ارجاع دهید.
- از ویژگی “aria-hidden = true” برای نامرئی نگه داشتن پنجره Modal تا زمان ورود ماشه استفاده می شود (مانند کلیک روی دکمه مرتبط).
- <div class = modal-header”> ، مدال سربرگ کلاسي است كه براي سرصفحه پنجره مدال سبك تعريف مي كند.
- “class = “close، یک کلاس بسته CSS است که سبک را برای دکمه بستن پنجره معین تنظیم می کند.
- “data-remove = “modal، یک ویژگی داده HTML5 سفارشی است. در اینجا برای بستن پنجره حالت استفاده می شود.
- “class = “modal-body، یک کلاس CSS از CSS بوت استرپ برای تنظیم سبک برای بدنه پنجره معین است.
- “class = “modal-footer، یک کلاس CSS از CSS بوت استرپ برای تنظیم سبک برای پاورقی پنجره modal است.
- “data-toggle = “ز، ویژگی HTML5 داده سفارشی data-toggle برای باز کردن پنجره modal استفاده می شود.
| متد | توضیح | مثال | ||
|---|---|---|---|---|
| Options − .modal(options) | محتوای شما را به عنوان یک نسخه فعال فعال می کند. یک شی گزینه اختیاری را می پذیرد. |
|
||
| Toggle − .modal(‘toggle’) | modal یک حالت را تغییر می دهد. |
|
||
| Show − .modal(‘show’) | modal یک حالت را باز می کند. |
|
||
| Hide − .modal(‘hide’) | modal یک حالت را مخفی می کند. |
|
مثال
موارد زیر استفاده از روش ها را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<h2>Example of using methods of Modal Plugin</h2> <!-- Button trigger modal --> <button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal"> Launch demo modal </button> <!-- Modal --> <div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true"> <div class = "modal-dialog"> <div class = "modal-content"> <div class = "modal-header"> <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4 class = "modal-title" id = "myModalLabel"> This Modal title </h4> </div> <div class = "modal-body"> Press ESC button to exit. </div> <div class = "modal-footer"> <button type = "button" class = "btn btn-default" data-dismiss = "modal"> Close </button> <button type = "button" class = "btn btn-primary"> Submit changes </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script> $(function () { $('#myModal').modal({ keyboard: true })}); </script> |
متدها
در اینجا چند روش مفید وجود دارد که می تواند با ()modal استفاده شود.
| متد | توضیح | مثال | ||
|---|---|---|---|---|
| Options − .modal(options) | محتوای شما را به عنوان یک نسخه فعال فعال می کند. یک شی گزینه اختیاری را می پذیرد. |
|
||
| Toggle − .modal(‘toggle’) | modal یک حالت را تغییر می دهد. |
|
||
| Show − .modal(‘show’) | modal یک حالت را باز می کند. |
|
||
| Hide − .modal(‘hide’) | modal یک حالت را مخفی می کند. |
|
مثال
موارد زیر استفاده از رویداد را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<h2>Example of using events of Modal Plugin</h2> <!-- Button trigger modal --> <button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal"> Launch demo modal </button> <!-- Modal --> <div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true"> <div class = "modal-dialog"> <div class = "modal-content"> <div class = "modal-header"> <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4 class = "modal-title" id = "myModalLabel"> This Modal title </h4> </div> <div class = "modal-body"> Click on close button to check Event functionality. </div> <div class = "modal-footer"> <button type = "button" class = "btn btn-default" data-dismiss = "modal"> Close </button> <button type = "button" class = "btn btn-primary"> Submit changes </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script> $(function () { $('#myModal').modal('hide')})}); </script> <script> $(function () { $('#myModal').on('hide.bs.modal', function () { alert('Hey, I heard you like modals...');}) }); </script> |
همانطور که در صفحه بالا مشاهده می شود ، اگر روی دکمه بستن یعنی مخفی کردن رویداد کلیک کنید ، یک پیام هشدار نمایش داده می شود.
لیست جلسات قبل آموزش بوت استرپ
- آموزش بوت استرپ
- بررسی اجمالی بوت استرپ
- آموزش راه اندازی بوت استرپ
- آموزش سیستم شبکه در بوت استرپ
- بررسی اجمالی CSS در بوت استرپ
- آموزش تایپوگرافی در بوت استرپ
- آموزش کد در بوت استرپ
- آموزش جدول در بوت استرپ
- آموزش فرم ها در بوت استرپ
- آموزش دکمه ها در بوت استرپ
- آموزش تصاویر در بوت استرپ
- آموزش کلاس های کمکی در بوت استرپ
- آموزش ابزارهای پاسخگو در بوت استرپ
- آموزش Glyphicons در بوت استرپ
- آموزش منوهای کشویی در بوت استرپ
- آموزش گروه های دکمه ای در بوت استرپ
- آموزش گروه های ورودی در بوت استرپ
- آموزش عناصر ناوبری در بوت استرپ
- آموزش Navbar در بوت استرپ
- آموزش Breadcrumbs در بوت استرپ
- آموزش صفحه بندی در بوت استرپ
- آموزش لیبل ها در بوت استرپ
- آموزش بج ها در بوت استرپ
- آموزش Jumbotron در بوت استرپ
- آموزش تصاویر کوچک در بوت استرپ
- آموزش هشدارها در بوت استرپ
- آموزش نوارهای پیشرفت در بوت استرپ
- آموزش شی Media در بوت استرپ
- آموزش گروه لیست در بوت استرپ
- آموزش پانل ها در بوت استرپ
- آموزش well در بوت استرپ
- بررسی اجمالی پلاگین ها در بوت استرپ
- آموزش پلاگین انتقال در بوت استرپ
نویسنده مطلب
saber
.svg)
دیدگاه شما