آموزش Popover (پاپ آپ) در بوت استرپ

بهاره حسنیبهاره حسنی
302 بازدید
tooltip
[cdb_box_content css=”.vc_custom_1572857124147{background-color: #1e73be !important;}”]

عنصر Popover بسیار شبیه به عنصر tooltips است ، و یک جعبه پاپ آپ است که وقتی کاربر روی یک عنصر کلیک میکند ، ظاهر میشود.

تفاوت Popover با tooltips  (پاپ آپ) در این است که Popover میتواند حاوی مطالب بیشتری باشد.

[/cdb_box_content]

با عرض سلام خدمت شما همراهان عزیز وب سایت پرنیان طرح

در این مطلب به آموزش Popover ها (پاپ آپ) در بوت استرپ ۴ میپردازیم.

چگونه یک Popover ایجاد کنیم ؟

برای ایجاد یک Popover ویژگی “data-toggle=”popover را به هر المان اضافه کنید.

از ویژگی title برای مشخص کردن عنوان متن Popover و ویژگی data-content برای مشخص کردن متنی که باید درون Popover نمایش داده شود استفاده نمایید.

نکته :

Popover باید با jQuery آغاز شود المان مورد نظر را انتخاب کرده و با متد ()popover فراخوانی کنید.

کد زیر تمام Popover های موجود در سند متنی را فعال میکند.

مثال :

[php]

<body>

<div class=”container”>
<h3>Popover Example</h3>
<a href=”#” data-toggle=”popover” title=”Popover Header” data-content=”Some content inside the popover”>Toggle popover</a>
</div>

<script>
$(document).ready(function(){
$(‘[data-toggle=”popover”]’).popover();
});
</script>

</body>

[/php]

خروجی کدهای مثال بالا :

عنوان

popver header

Positioning Popovers :

به طور پیش فرض Popover در سمت راست عناصر ظاهر میشود.

از ویژگی data-placement برای تعیین موقعیت Popover در بالا ، پایین ، سمت راست یا چپ عناصر استفاده میشود.

مثال :

[php]

<body>

<div class=”container”>
<h3>Popover Example</h3>
<p>By default, the popover will appear on the right side of the element.</p>
<p>Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element.</p>
<p>Note: The placement attributes do not work if it is not enough room for them. For example, try to remove these paragraphs and click on the “Top” popover to understand how it works.</p>
<a href=”#” title=”Header” data-toggle=”popover” data-placement=”top” data-content=”Content”>Top</a>
<a href=”#” title=”Header” data-toggle=”popover” data-placement=”bottom” data-content=”Content”>Bottom</a>
<a href=”#” title=”Header” data-toggle=”popover” data-placement=”left” data-content=”Content”>Left</a>
<a href=”#” title=”Header” data-toggle=”popover” data-placement=”right” data-content=”Content”>Right</a>
</div>

<script>
$(document).ready(function(){
$(‘[data-toggle=”popover”]’).popover();
});
</script>

</body>

[/php]

خروجی کدهای مثال بالا :

جهت نمایش popover

position

Closing Popovers :

به طور پیش فرض وقتی دوباره روی عنصر کلیک میکنید Popover بسته میشود.

با این حال میتوانید از خصیصه ی “data-trigger=”focus استفاده کنید که هنگام کلیک کردن در خارج از عنصر Popover را میبندد.

مثال :

[php]

<body>

<div class=”container”>
<h3>Popover Example</h3>
<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>
</div>

<script>
$(document).ready(function(){
$(‘[data-toggle=”popover”]’).popover();
});
</script>

</body>

[/php]

خروجی کدهای مثال بالا :

بستن popover

closing popover

نکته :

اگر میخواهید Popover هنگام انتقال نشانگر ماوس بر روی عنصر نمایش داده شود از ویژگی data-trigger با مقدار “hover” استفاده کنید.

مثال :

[php]

<body>

<div class=”container”>
<h3>Popover Example</h3>
<a href=”#” title=”Header” data-toggle=”popover” data-content=”Some content”>Click Me</a><br>
<a href=”#” title=”Header” data-toggle=”popover” data-trigger=”hover” data-content=”Some content”>Hover over me</a>
</div>

<script>
$(document).ready(function(){
$(‘[data-toggle=”popover”]’).popover();
});
</script>

</body>

[/php]

خروجی کدهای مثال بالا :

حالت شناور

hover

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

23+ محصولات
405+ سفارشات تکمیل شده
2098+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت