بوت اسپرینگ 5 پاپ اپ

ਪੋਪਅਪ

ਪੋਪਅਪ (Popover) ਕੰਪੋਨੈਂਟ ਟੂਲਟਿੱਪ ਨਾਲ ਸਮਾਨ ਹੈ; ਇਹ ਇੱਕ ਪੋਪਅਪ ਹੈ ਜੋ ਉਪਯੋਗਕਰਤਾ ਨੂੰ ਅੰਗਾਮੇ ਨੂੰ ਕਲਿੱਕ ਕਰਨ ਉੱਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਅੰਤਰ ਇਹ ਹੈ ਕਿ ਪੋਪਅਪ ਵਿੱਚ ਅਧਿਕ ਸਮਾਚਾਰ ਰੱਖਿਆ ਜਾ ਸਕਦਾ ਹੈ。

ਪੋਪਅਪ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ

ਪੋਪਅਪ ਬਣਾਉਣ ਲਈ data-bs-toggle="popover" ਪੈਰੀਮੀਟਰ ਨੂੰ ਅੰਗਾਮੇ ਵਿੱਚ ਜੋੜਦਾ ਹੈ。

ਵਰਤੋਂ ਕਰੋ title ਪੈਰੀਮੀਟਰ ਵਿੱਚ ਪੋਪਅਪ ਦੇ ਸਿਰਲੇਖ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ ਅਤੇ data-bs-content ਪੈਰੀਮੀਟਰ ਵਿੱਚ ਪੋਪਅਪ ਅੰਦਰ ਦਿਖਾਈ ਵਾਲੀ ਲਿਖਤ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="ਪੋਪਅਪ ਸਿਰਲੇਖ" data-bs-content="ਪੋਪਅਪ ਅੰਦਰ ਦੀਆਂ ਕੁਝ ਸਮਾਚਾਰ">ਪੋਪਅਪ ਟੋਗਲ</button>

ਧਿਆਨ:ਪੋਪਅਪ ਕੰਮ ਕਰਨ ਲਈ ਜੈਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਪ੍ਰਾਰੰਭ ਕਰਨਾ ਜ਼ਰੂਰੀ ਹੈ。

ਹੇਠ ਲਿਖੇ ਕੋਡ ਦਾ ਉਪਯੋਗ ਕਰਕੇ ਨੋਡੇਸ਼ਨ ਵਿੱਚ ਸਾਰੇ ਪੋਪਅਪ ਚਾਲੂ ਕਰੋ:

ਉਦਾਹਰਣ

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਪੋਪਅਪ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕਰੋ

ਮੂਲ ਰੂਪ ਵਿੱਚ, ਪੋਪਅਪ ਅੰਗਾਮੇ ਦੇ ਦੁਆਰਾ ਹੋਵੇਗਾ。

ਵਰਤੋਂ ਕਰੋ data-bs-placement ਪੈਰੀਮੀਟਰ ਸੈਟਿੰਗ ਪੋਪਅਪ ਜਿਸ ਦਾ ਸਥਾਨ ਅੰਗਾਮੇ ਦੇ ਉੱਪਰ, ਨੀਚੇ, ਆਮੀਂ ਜਾਂ ਦੁਆਰਾ ਹੋਵੇ:

ਉਦਾਹਰਣ

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">ਖੱਬੇ</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">ਸੱਜੇ</a>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਧਿਆਨ:ਜੇਕਰ ਕਾਫੀ ਜਗ੍ਹਾ ਨਹੀਂ ਹੋਵੇ, placement ਵਿਸ਼ੇਸ਼ਤਾ ਤੁਹਾਡੀ ਉਮੀਦ ਅਨੁਸਾਰ ਕੰਮ ਨਹੀਂ ਕਰੇਗੀ। ਉਦਾਹਰਣ ਵਜੋਂ: ਜੇਕਰ ਤੁਸੀਂ ਪੰਨੇ ਦੀ ਸਿਰਫ਼ ਉੱਪਰ ਵਰਤੋਂ ਕਰਦੇ ਹੋ (ਕੋਈ ਰਾਖਵਾਂਗਾ ਜਗ੍ਹਾ ਨਹੀਂ), top placement ਵਿਸ਼ੇਸ਼ਤਾ ਇਲੈਕਟਰੋਨ ਦੇ ਨੇੜੇ ਜਾਂ ਪੱਛਮ (ਜਿਥੇ ਜਗ੍ਹਾ ਹੋਵੇ) ਵਿੱਚ ਪੋਪਅਪ ਦਿਖਾਇਆ ਜਾਵੇਗਾ。

ਪੋਪਅਪ ਬੰਦ ਕਰੋ

ਮੂਲਤਬੀ ਤੌਰ 'ਤੇ, ਇਲੈਕਟਰੋਨ 'ਤੇ ਮੁੜ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਪੋਪਅਪ ਬੰਦ ਹੋ ਜਾਵੇਗਾ। ਪਰ, ਤੁਸੀਂ data-bs-trigger="focus" ਵਿਸ਼ੇਸ਼ਤਾ, ਇਸ ਪ੍ਰਤਿਭਾ ਨੂੰ ਸੈਟ ਕਰਨ ਨਾਲ ਪੋਪਅਪ ਦਾ ਬੰਦ ਕਰਨ ਲਈ ਇਲੈਕਟਰੋਨ ਬਾਹਰ ਕਲਿੱਕ ਕਰਨ ਨੂੰ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ

ਉਦਾਹਰਣ

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="单击文档中的任意位置可关闭此弹出窗口">点击我</a>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਹੋਵੇਂ ਹੋਵੇਂ ਹੋਵੇਂ

ਸੁਝਾਅ:ਅਗਰ ਤੁਸੀਂ ਮਾਉਸ ਪਾਇੰਟਰ ਨੂੰ ਇਲੈਕਟਰੋਨ ਉੱਤੇ ਲਿਆਉਣ ਨਾਲ ਪੋਪਅਪ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸ ਦਾ ਮੁੱਲ ਵਰਤੋਂ ਕਰੋ "hover" ਦਾ data-bs-trigger ਵਿਸ਼ੇਸ਼ਤਾ:

ਉਦਾਹਰਣ

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="ਪੋਪਅਪ ਟੈਕਸਟ">ਮੇਰੇ ਉੱਪਰ ਹੋਵੇਂ</a>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ