پاپ آپ ها شامل اطلاعات بیشتری از اعلان های راهنماست و با کلیک کردن اطلاعات را به صورت کامل در اختیار شما قرار می دهند ، در بخش های مختلف سایت به نحوه های مختلفی بسته به نوع طراحی می توانید از پاپ آپ ها استفاده کنید.
پیشنهاد می شود در صورت نیاز به سایر قسمت های دوره رایگان بوت استرپ مراجعه فرمایید.
نحوه ساخت پاپ آپ
برای ساخت پاپ آپ کافی است تا المان data-toggle=”popover” را به عنصر خود اضافه کنید.
از المان title استفاده کنید تا عنصر مشخصی را برای پاپ اپ خود بسازید . از ویژگی data-content برای تعیین متنی که باید در بدنه پاپ آپ نمایش داده شود به شکل زیر استفاده کنید:
|
1 |
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a> |
نکته : برای ساخت پاپ آپ باید از جی کوئری استفاده کرد . کافی است از متد popover() برای مشخص کردن المان ها استفاده کنید.
قطعه کد زیر نمایان گر پاپ آپ ها است :
|
1 2 3 4 5 |
< script > $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </ script > |
موقعیت قرار گیری پاپ آپ
در حالت پیش فرض ، پاپ آپ ها در سمت راست قرار میگیرند.
برای تغییر قرار گیری کافی است data-placement استفاده کنید . برای درک بهتره به نمونه های زیر توجه کنید :
|
1 2 3 4 |
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a> <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a> <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a> <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a> |
بستن پاپ آپ ها
درحالت پیش فرض پاپ آپ ها تنها زمانی بسته می شوند که روی دکمه کلیک کنید. شما می توانید از data-trigger=”focus” استفاده کنید تا با کلیک کردن هرجایی از صفحه پاپ آپ شما بسته شود.
|
1 |
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a> |
نکته : اگر قصد دارید پاپ آپ ها با حرکت موس نمایان شود از المان data-trigger استفاده کنید :
|
1 |
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a> |
پیشنهاد میشود در صورت تمایل به مطالعه بیشتر به سایت getbootstrap مراجعه فرمایید.
