پلاگین modal در بوت استرپ

پلاگین مودال(modal) در بوتسترپ

Wiki

پلاگین مودال(modal) در واقع یک پنجره ی دیالوگ و پاپ آپ است که در بالای صفحه ی جاری نمایش می یابد:

	نکته: پلاگین مودال را به دو صورت می توانید اضافه کنید:  1. با اضافه کردن فایل modal.js به صورت جداگانه. 2. به طور کامل، با استفاده از فایل های bootstrap.js و یا bootstrap.min.js .

چطور می توانیم یک مودال را ایجاد کنیم؟

Wiki

مثال زیر نشان می دهد که چطور می توانیم یک مودال ابتدایی را ایجاد کنیم:

توضیح و تشریح مثال بالا

توضیح بخش Trigger:

برای راه اندازی پنجره ی مودال،باید از یک دکمه یا لینک استفاده کنید.

سپس باید دو خصوصیت از نوع *-data را به صورت زیر اضافه نمایید:

• برای باز کردن پنجره ی مودال : "data-toggle="modal
• برای اشاره کردن به آی دی مودال: "data-target="#myModal

توضیح بخش Modal

عنصر والد مودال، که یک <div> است، باید یک id داشته باشد که با id قرار گرفته در خصوصیت data-target برابر باشد.

کلاس modal. محتوای عنصر div ای که در آن تعریف شده است را تبدیل به یک مودال می کند و فوکس را به آن منتقل می کند. 

کلاس fade. نیز یک افکت انتقال(transition) را به مودال اضافه می کند که باعث می شود مودال در هنگام باز و بسته شدن محو شود. بنابراین اگر که نمی خواهید افکت محو شدن به مودال مورد نظر اضافه شود، این کلاس را حذف کنید.

خصوصیت "role="dialog دسترسی کسانی که از صفحه خوان ها استفاده می کنند را بهبود می بخشد. 

کلاس modal-dialog. عرض و margin مناسب را به مودال اختصاص می دهد. 

توضیح بخش Modal content:

عنصر <div> که دارای "class="modal-content است، درواقع به مودال ما استایل می دهد و border و background-color  و ... را تنظیم می کند. در درون عنصر <div> یاد شده، قسمت های header و body و footer نیز وجود دارند. 

از کلاس modal-header. برای تعریف استایل، برای قسمت header از مودال، استفاده می شود. همان طور که مشاهده می کنید، عنصر <button> که در درون header قرار دارد، دارای یک خصوصیت "data-dismiss="modal می باشد. این خصوصیت، باعث می شود که اگر بر روی این دکمه کلیک کنید، مودال بسته شود. و کلاس close. ، دکمه ی بستن را استایل دهی می کند و کلاس modal-title. با استفاده از یک line-hight مناسب، قسمت header را استایل دهی می کند. 

از کلاس modal-body.  برای تعریف یک استایل، برای قسمت بدنه ی مودال استفاده می شود. در آن قسمت می توانید هر نوع کد اچ تی ام ال را قرار دهید مانند: پاراگراف ها و عکس ها و ویدئوها و ... .

از کلاس modal-footer.  برای تعریف یک استایل، برای قسمت footer از مودال استفاده می شود. توجه داشته باشید که این قسمت، به طور پیش فرض راست چین می باشد. 

اندازه ی مودال

Wiki

می توانید با اضافه کردن کلاس modal-sm. برای مودال های کوچک، سایز مودال را تغییر دهید. همچنین می توانید با اضافه کردن کلاس modal-lg. برای مودال های بزرگ، سایز مودال را تغییر دهید. 

با اضافه کردن کلاس اندازه، به عنصر <div> که دارای کلاس modal-dialog. می باشد، می توانید اندازه ی مودال را تعیین کنید:

	به طور پیش فرض، مودال ها دارای اندازه ی متوسط(medium) می باشند.

• قبلی
• بعدی