modal ها در بوت استرپ

آخرین بروز رسانی: اسفند ۱۹, ۱۳۹۶

برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.webyar.net/

modal ها در بوت استرپ

مدال در بوت استرپ

مدال یک پنجره  محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود.  برای ساخت modal نیاز به کدهای html  ، css وjava script  دارید. ساخت مدال از صفر، کار بسیار سخت و پیچیده ای است ولی بوت استرپ (bootstrap) این کار را برای ما آسان کرده و لازم به کدنویسی های پیشرفته ای نداریم. با طراحی سایت وب یار همراه باشید تا نحوه ی ایجاد modal در بوت استرپ را به شما آموزش دهیم.

ساخت modal در بوت استرپ

برای ایجاد مدال در بوت استرپ به دو فایل bootstrap.css وbootstrap.js نیاز دارید. شما می توانید این فایل ها را از سایت بوت استرپ دانلود نمایید و در کدهایتان آن ها را فراخوانی کنید. فایل bootstrap.css را در پوشه ای به نام css و فایل bootstrap.js را در پوشه ای به نام js قرار دهید. نحوه ی فراخوانی این دو فایل را می توانید در کد زیر مشاهده نمایید. یک فایل index.html  بسازید و قطعه کد زیر را در آن قرار دهید.

<!DOCTYPE html> <html lang="fa"> <head> 	<meta charset="UTF-8"> 	<meta http-equiv="X-UA-Compatible" content="IE=edge"> 	<meta name="viewport" content="width=device-width,initial-scale=1 "> 		<title>bootstrap-18</title> 	<link href="css/bootstrap.css" rel="stylesheet"> 	<link href="style.css" rel="stylesheet"> </head> <body> <div class="wrapper">   <h2>Modal Example</h2>   <!-- Trigger the modal with a button -->   <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>   <!-- Modal -->   <div class="modal fade" id="myModal" role="dialog">     <div class="modal-dialog">          <!-- Modal content-->       <div class="modal-content">         <div class="modal-header">           <button type="button" class="close" data-dismiss="modal">&times;</button>           <h4 class="modal-title">Modal Header</h4>         </div>         <div class="modal-body">           <p>Some text in the modal.</p>         </div>         <div class="modal-footer">           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>         </div>       </div>           </div>  </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 	<script src="js/bootstrap.js"></script> </body> </html>

 

نتیجه ی قطعه کد بالا در تصویر زیر مشاهده می شود که با کلیک برروی دکمه open modal  یک پنجره به صورت پاپ آپ باز می شود و با زدن علامت ضربدر و یا دکمه close و یا حتی با کلیک بر روی بک گراند مدال ، مدال بسته خواهد شد.

modal در بوت استرپ

قسمت Trigger

برای باز شدن modal  باید به یک لینک یا یک دکمه خصوصیت زیر را اختصاص دهید.

data-toggle="modal"   data-target="#mymodal"

مقدار data-toggle  نوع دکمه را مشخص می کند که از نوع مدال باشد و مقدار data-target  هم شناسه یا آیدی مدال موردنظر است.

قسمت  Modal

div  مربوط به مدال موردنظر باید یک id  داشته باشد که مقدار این  id  باید با مقدار  data-target یکسان باشد. اگر بخواهیم در یک صفحه چندین مدال بسازیم باید برای هر مدال یک آیدی منحصر به فرد در نظر بگیریم تا با مشکل مواجه نشویم.

برای فعال کردن و ایجاد فوکوس روی مدال باید به div  موردنظر کلاس modal  را بدهیم  ، کلاس fade  هم برای قرار دادن افکت بر روی باز و بسته شدن مدال است که می توانید آن را حذف نمایید.

قسمت Modal content

خصوصیت  data-dismiss=”modal” باعث می شود مدال مورد نظر بسته شود و کلاس  close هم برای استایل دهی به دکمه  استفاده می شود. کلاس های modal-header، modal-body و modal-footer به ترتیب برای استایل دهی به قسمت هدر مدال، بدنه ی مدال و فوتر آن استفاده می شوند. بقیه ی کلاس ها نیز برای استایل دهی قسمت های مختلف مدال استفاده می شود. درصورتی که بخواهید استایل مدال خود را سفارشی سازید باید یک فایل style.css بسازید و لینک آن را در ایندکس بعد از لینک bootstrap.css قرار دهید و کدهای خود را در  style.css قرار دهید.

نتیجه گیری

در این بخش از آموزش بوت استرپ ، به نحوه ی ساخت modal در بوت استرپ پرداخته شد. اگر به یادگیری بوت استرپ علاقمند هستید، می توانید مقالات دکمه ها در بوت استرپ، تصاویر در بوت استرپ، هشدارها در بوت استرپ، جداول در بوت استرپ و استایل دهی به متن در بوت استرپ را نیز مطالعه کنید.

تیم طراحی سایت وب یار همچنان آموزش های بوت استرپ را ادامه خواهد داد. با پیوستن به کانال @webyar_net می توانید از جدیدترین مقالات آموزشی تیم وب یار مطلع شوید.

نوشته modal ها در بوت استرپ اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.

طراحی سایت اصفهان | سئو سایت اصفهان

پربازدیدترین اخبار

لیست سنگبری ها و اطلاعات سنگبری ها کشور ایران به واسطه موقعیت جغرافیایی مناسب ، از جمله کشورهای صاحب عنوان و مطرح در زمینه تولید سنگ های ساختمانی و کارخانجات سنگ می باشد. یکی از مزایای خدادادی صنعت سنگ در ایران تنوع رنگ و معادن آن است. در ایران انواع معادن سنگ های تزئینی با […]

طراحی سایت اصفهان

طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت طراحی سایت اصفهان تیم طراحی سایت و سئو سایت وب یار به آدرس http://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت […]

عکس بستنی قیفی بستنی قیفی یک بستنی محبوب همه و به ویژه محبوب بچه هاست. نان های قیقی با شکل های مختلف به این منظور تولید می شوند و هر نوع بستنی از میوه ای و شکلاتی گرفته تا خامه ای را به صورت قیفی و به اشکال زیبا عرضه می کنند. در اینجا عکسهای […]

طراحی سایت

طراحی سایت در اصفهان   طراحی سایت و سئو سایت در اصفهان   تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]

رام رسمی اندروید ۶٫۰٫۱ ملقب به مارشمالو بلاخره برای سامسونگ گلکسی S5 منتشر شد. در این پست تمامی رام های اندروید ۶ سری SM-G900 را به تفکیک مدل با آموزش اختصاصی نصب متنی و ویدیویی قرار میدهیم. همانطور که میدانید حتی اندروید ۵٫۱٫۱ برای گلکسی اس۵ منتشر نشد و این دیوایس با نسخه مشکل دار […]

طرح حنا روی دست رنگ آمیزی با رنگ های طبیعی مثل حنا روی پوست بدن در کشورهای آسیایی بسیار رایج است و زیبایی آن باعث شده است به مدی در دنیا تبدیل شود. در تصاویر زیر نمونه هایی از طرح حنا روی دست را می توانید ببینید:       نوشته طرح حنا روی دست […]

مدل لباس ورزشی زنانه ای که انتخاب می‌کنید، می‌تواند یک مدل ساده باشد یا یک مدل جذاب و مطابق با مد روز. اما بیایید به سال ۲۰۱۶ مدهایی مانند لگینگ های طرح‌دار یا استفاده از پارچه‌ی مخمل در لباس های اسپرت زنانه فکر کنیم که چقد ظاهر جذاب‌تری به لباس های همیشگی می‌داد؛ ۲۰۱۷ قرار […]