মোডাল
লাইটবক্স, ব্যবহারকারীর বিজ্ঞপ্তি বা সম্পূর্ণ কাস্টম সামগ্রীর জন্য আপনার সাইটে ডায়ালগ যোগ করতে বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট মডেল প্লাগইন ব্যবহার করুন।
কিভাবে এটা কাজ করে
বুটস্ট্র্যাপের মডেল কম্পোনেন্ট দিয়ে শুরু করার আগে, আমাদের মেনু বিকল্পগুলি সম্প্রতি পরিবর্তিত হওয়ায় নিম্নলিখিতটি পড়তে ভুলবেন না।
- এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে মোডাল তৈরি করা হয়। এগুলি নথিতে থাকা সমস্ত কিছুর উপরে অবস্থান করে এবং এর পরিবর্তে স্ক্রোলটি সরিয়ে দেয়
<body>
যাতে মডেল সামগ্রী স্ক্রোল করে। - মডেল "ব্যাকড্রপ" এ ক্লিক করলে স্বয়ংক্রিয়ভাবে মডেলটি বন্ধ হয়ে যাবে।
- বুটস্ট্র্যাপ একটি সময়ে শুধুমাত্র একটি মডেল উইন্ডো সমর্থন করে। নেস্টেড মডেলগুলি সমর্থিত নয় কারণ আমরা বিশ্বাস করি যে সেগুলি ব্যবহারকারীর অভিজ্ঞতা খারাপ৷
- মডেলগুলি ব্যবহার করে
position: fixed
, যা কখনও কখনও এর রেন্ডারিং সম্পর্কে কিছুটা নির্দিষ্ট হতে পারে। যখনই সম্ভব, অন্যান্য উপাদান থেকে সম্ভাব্য হস্তক্ষেপ এড়াতে আপনার মডেল এইচটিএমএলকে একটি শীর্ষ-স্তরের অবস্থানে রাখুন।.modal
অন্য একটি নির্দিষ্ট উপাদানের মধ্যে একটি নেস্ট করার সময় আপনি সম্ভবত সমস্যায় পড়বেন । - আবারও, এর কারণে
position: fixed
, মোবাইল ডিভাইসে মডেল ব্যবহার করার সাথে কিছু সতর্কতা রয়েছে। বিস্তারিত জানার জন্য আমাদের ব্রাউজার সমর্থন ডক্স দেখুন. - HTML5 কীভাবে তার শব্দার্থবিদ্যাকে সংজ্ঞায়িত করে তার কারণে, বুটস্ট্র্যাপ মডেলগুলিতে
autofocus
এইচটিএমএল অ্যাট্রিবিউটের কোনো প্রভাব নেই। একই প্রভাব অর্জন করতে, কিছু কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
মিডিয়া প্রশ্নের উপর নির্ভর করে। আমাদের অ্যাক্সেসিবিলিটি ডকুমেন্টেশনের হ্রাসকৃত গতি বিভাগটি দেখুন
।
ডেমো এবং ব্যবহারের নির্দেশিকা পড়তে থাকুন।
উদাহরণ
মডেল উপাদান
নীচে একটি স্ট্যাটিক মডেল উদাহরণ (যার মানে এটি position
এবং display
ওভাররাইড করা হয়েছে)। অন্তর্ভুক্ত হল মডেল হেডার, মডেল বডি (এর জন্য প্রয়োজনীয় padding
), এবং মডেল ফুটার (ঐচ্ছিক)। আমরা আপনাকে যখনই সম্ভব খারিজ ক্রিয়া সহ মডেল শিরোনাম অন্তর্ভুক্ত করতে বলি, অথবা অন্য একটি স্পষ্ট বরখাস্ত ব্যবস্থা প্রদান করুন।
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
সরাসরি নমুনা
নিচের বোতামে ক্লিক করে একটি কাজের মডেল ডেমো টগল করুন। এটি নীচে স্লাইড হবে এবং পৃষ্ঠার শীর্ষ থেকে বিবর্ণ হয়ে যাবে৷
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
স্ট্যাটিক ব্যাকড্রপ
ব্যাকড্রপ স্ট্যাটিক সেট করা হলে, এর বাইরে ক্লিক করার সময় মোডাল বন্ধ হবে না। এটি চেষ্টা করতে নীচের বোতামে ক্লিক করুন.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
দীর্ঘ বিষয়বস্তু স্ক্রোলিং
যখন মডেলগুলি ব্যবহারকারীর ভিউপোর্ট বা ডিভাইসের জন্য খুব দীর্ঘ হয়ে যায়, তখন তারা পৃষ্ঠা থেকে স্বাধীনভাবে স্ক্রোল করে। আমরা কি বলতে চাই তা দেখতে নীচের ডেমোটি চেষ্টা করুন।
আপনি একটি স্ক্রোলযোগ্য মোডালও তৈরি করতে পারেন যা যোগ করে মোডাল বডি স্ক্রোল করতে .modal-dialog-scrollable
দেয় .modal-dialog
।
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
উল্লম্বভাবে কেন্দ্রীভূত
মডেলটিকে উল্লম্বভাবে কেন্দ্রে যোগ করুন .modal-dialog-centered
।.modal-dialog
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
টুলটিপস এবং popovers
টুলটিপস এবং পপোভারগুলিকে প্রয়োজন অনুসারে মোডালের মধ্যে স্থাপন করা যেতে পারে। যখন মোডাল বন্ধ থাকে, তখন যেকোন টুলটিপ এবং পপওভারগুলিও স্বয়ংক্রিয়ভাবে বাতিল হয়ে যায়।
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
গ্রিড ব্যবহার করে
একটি মডেলের মধ্যে বুটস্ট্র্যাপ গ্রিড সিস্টেমটি ব্যবহার .container-fluid
করুন .modal-body
. তারপর, সাধারণ গ্রিড সিস্টেম ক্লাসগুলি ব্যবহার করুন যেমন আপনি অন্য কোথাও করবেন।
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
পরিবর্তিত মডেল বিষয়বস্তু
আপনার কাছে একগুচ্ছ বোতাম আছে যা একই মোডেলকে কিছুটা ভিন্ন বিষয়বস্তু সহ ট্রিগার করে? কোন বোতামে ক্লিক করা হয়েছে তার উপর নির্ভর করে মডেলের বিষয়বস্তু পরিবর্তন করতে ব্যবহার করুন event.relatedTarget
এবং HTML data-bs-*
বৈশিষ্ট্য ।
নীচে HTML এবং JavaScript উদাহরণ সহ একটি লাইভ ডেমো রয়েছে৷ আরও তথ্যের জন্য, বিশদ বিবরণের জন্য মডেল ইভেন্ট ডক্স পড়ুনrelatedTarget
।
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
মডেলের মধ্যে টগল করুন
data-bs-target
এবং বৈশিষ্ট্যগুলির কিছু চতুর বসানো সহ একাধিক মডেলের মধ্যে টগল করুন data-bs-toggle
৷ উদাহরণস্বরূপ, আপনি ইতিমধ্যে খোলা সাইন ইন মোডালের মধ্যে থেকে একটি পাসওয়ার্ড রিসেট মোডাল টগল করতে পারেন। অনুগ্রহ করে মনে রাখবেন একাধিক মডেল একই সময়ে খোলা যাবে না — এই পদ্ধতিটি কেবল দুটি পৃথক মডেলের মধ্যে টগল করে।
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
অ্যানিমেশন পরিবর্তন করুন
ভেরিয়েবলটি মোডাল ফেইড-ইন অ্যানিমেশনের আগে $modal-fade-transform
রূপান্তর অবস্থা নির্ধারণ করে, ভেরিয়েবলটি মোডাল ফেড-ইন অ্যানিমেশনের শেষে রূপান্তর নির্ধারণ করে ।.modal-dialog
$modal-show-transform
.modal-dialog
আপনি উদাহরণস্বরূপ একটি জুম-ইন অ্যানিমেশন চান, আপনি সেট করতে পারেন $modal-fade-transform: scale(.8)
.
অ্যানিমেশন সরান
দেখার জন্য বিবর্ণ হওয়ার পরিবর্তে সহজভাবে প্রদর্শিত মডেলগুলির জন্য, .fade
আপনার মোডাল মার্কআপ থেকে ক্লাসটি সরিয়ে দিন।
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
গতিশীল উচ্চতা
যদি একটি মোডেল খোলা থাকার সময় তার উচ্চতা পরিবর্তিত হয়, তাহলে myModal.handleUpdate()
একটি স্ক্রলবার উপস্থিত হওয়ার ক্ষেত্রে আপনাকে মোডেলের অবস্থান পুনরায় সামঞ্জস্য করতে কল করা উচিত।
অ্যাক্সেসযোগ্যতা
aria-labelledby="..."
মডেল শিরোনাম উল্লেখ করে, যোগ করতে ভুলবেন না .modal
। aria-describedby
উপরন্তু, আপনি on এর সাথে আপনার মডেল ডায়ালগের একটি বিবরণ দিতে পারেন .modal
। মনে রাখবেন যে আপনাকে যোগ করার দরকার নেই role="dialog"
যেহেতু আমরা ইতিমধ্যেই জাভাস্ক্রিপ্টের মাধ্যমে এটি যোগ করেছি।
ইউটিউব ভিডিও এম্বেড করা
মডেলগুলিতে YouTube ভিডিওগুলি এম্বেড করার জন্য স্বয়ংক্রিয়ভাবে প্লেব্যাক এবং আরও অনেক কিছু বন্ধ করতে বুটস্ট্র্যাপে নয় অতিরিক্ত জাভাস্ক্রিপ্টের প্রয়োজন৷ আরও তথ্যের জন্য এই সহায়ক স্ট্যাক ওভারফ্লো পোস্টটি দেখুন।
ঐচ্ছিক মাপ
মোডেলগুলির তিনটি ঐচ্ছিক মাপ আছে, যা মডিফায়ার ক্লাসের মাধ্যমে উপলব্ধ একটি .modal-dialog
. সংকীর্ণ ভিউপোর্টে অনুভূমিক স্ক্রলবার এড়াতে এই মাপগুলি নির্দিষ্ট ব্রেকপয়েন্টে প্রবেশ করে।
আকার | ক্লাস | মোডাল সর্বোচ্চ-প্রস্থ |
---|---|---|
ছোট | .modal-sm |
300px |
ডিফল্ট | কোনোটিই নয় | 500px |
বড় | .modal-lg |
800px |
অতিরিক্ত বড় | .modal-xl |
1140px |
মডিফায়ার ক্লাস ছাড়া আমাদের ডিফল্ট মোডাল "মাঝারি" আকারের মডেল গঠন করে।
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
ফুলস্ক্রিন মডেল
আরেকটি ওভাররাইড হল ব্যবহারকারীর ভিউপোর্টকে কভার করে এমন একটি মডেল পপ আপ করার বিকল্প, যা একটি তে স্থাপন করা মডিফায়ার ক্লাসের মাধ্যমে উপলব্ধ .modal-dialog
।
ক্লাস | উপস্থিতি |
---|---|
.modal-fullscreen |
সর্বদা |
.modal-fullscreen-sm-down |
নিচে576px |
.modal-fullscreen-md-down |
নিচে768px |
.modal-fullscreen-lg-down |
নিচে992px |
.modal-fullscreen-xl-down |
নিচে1200px |
.modal-fullscreen-xxl-down |
নিচে1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
সস
ভেরিয়েবল
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
লুপ
রেসপন্সিভ পূর্ণস্ক্রীন$breakpoints
মডেল ম্যাপ এবং একটি লুপের মাধ্যমে তৈরি করা হয় scss/_modal.scss
।
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
ব্যবহার
মোডাল প্লাগইন ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে চাহিদা অনুযায়ী আপনার লুকানো বিষয়বস্তু টগল করে। এটি ডিফল্ট স্ক্রোলিং আচরণকেও ওভাররাইড করে এবং .modal-backdrop
মডেলের বাইরে ক্লিক করার সময় দেখানো মডেলগুলি খারিজ করার জন্য একটি ক্লিক এলাকা প্রদান করে।
ডেটা অ্যাট্রিবিউটের মাধ্যমে
টগল
জাভাস্ক্রিপ্ট না লিখে একটি মডেল সক্রিয় করুন। একটি বা data-bs-toggle="modal"
সহ একটি বোতামের মতো একটি নিয়ামক উপাদানের উপর সেট করুনdata-bs-target="#foo"
href="#foo"
টগল করার জন্য একটি নির্দিষ্ট মডেলকে লক্ষ্য করতে।
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
খারিজ
নীচে প্রদর্শিত হিসাবে মডেলের মধ্যেdata
একটি বোতামের বৈশিষ্ট্য দিয়ে বরখাস্ত করা য��তে পারে :
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
অথবা নীচে প্রদর্শিত হিসাবে ব্যবহার করে মডেলের বাইরে একটি বোতামে data-bs-target
:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
জাভাস্ক্রিপ্টের মাধ্যমে
জাভাস্ক্রিপ্টের একটি লাইন দিয়ে একটি মডেল তৈরি করুন:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
অপশন
বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-bs-
, যেমনটি data-bs-backdrop=""
।
নাম | টাইপ | ডিফল্ট | বর্ণনা |
---|---|---|---|
backdrop |
বুলিয়ান বা স্ট্রিং'static' |
true |
একটি মডেল-ব্যাকড্রপ উপাদান অন্তর্ভুক্ত। বিকল্পভাবে, static একটি পটভূমির জন্য নির্দিষ্ট করুন যা ক্লিকে মোডাল বন্ধ করে না। |
keyboard |
বুলিয়ান | true |
এস্কেপ কী চাপলে মোডাল বন্ধ করে |
focus |
বুলিয়ান | true |
আরম্ভ করার সময় মডেলের উপর ফোকাস রাখে। |
পদ্ধতি
অ্যাসিঙ্ক্রোনাস পদ্ধতি এবং রূপান্তর
সমস্ত API পদ্ধতি অসিঙ্ক্রোনাস এবং একটি রূপান্তর শুরু করে । রূপান্তর শুরু হওয়ার সাথে সাথেই কিন্তু এটি শেষ হওয়ার আগেই তারা কলারের কাছে ফিরে আসে । উপরন্তু, একটি রূপান্তরকারী উপাদানের উপর একটি পদ্ধতি কল উপেক্ষা করা হবে ।
পাসিং বিকল্প
আপনার সামগ্রীকে একটি মডেল হিসাবে সক্রিয় করে। একটি ঐচ্ছিক বিকল্প গ্রহণ করে object
।
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
টগল
ম্যানুয়ালি একটি মডেল টগল করে। মডেলটি আসলে দেখানো বা লুকানোর আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।shown.bs.modal
hidden.bs.modal
myModal.toggle()
দেখান
ম্যানুয়ালি একটি মডেল খোলে। মডেলটি আসলে দেখানো হওয়ার আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।shown.bs.modal
myModal.show()
এছাড়াও, আপনি একটি যুক্তি হিসাবে একটি DOM উপাদান পাস করতে পারেন যা মডেল ইভেন্টগুলিতে ( relatedTarget
সম্পত্তি হিসাবে) পাওয়া যেতে পারে।
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
লুকান
ম্যানুয়ালি একটি মডেল লুকিয়ে রাখে। মডেলটি আসলে লুকানো হওয়ার আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।hidden.bs.modal
myModal.hide()
হ্যান্ডেল আপডেট
ম্যানুয়ালি মোডালের অবস্থান পুনরায় সামঞ্জস্য করুন যদি একটি মোডেল খোলা থাকার সময় তার উচ্চতা পরিবর্তিত হয় (অর্থাৎ যদি একটি স্ক্রলবার উপস্থিত হয়)।
myModal.handleUpdate()
নিষ্পত্তি
একটি উপাদানের মডেল ধ্বংস করে। (DOM উপাদানে সঞ্চিত ডেটা সরিয়ে দেয়)
myModal.dispose()
getInstance
স্ট্যাটিক পদ্ধতি যা আপনাকে একটি DOM উপাদানের সাথে যুক্ত মডেল ইনস্ট্যান্স পেতে দেয়
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
স্ট্যাটিক পদ্ধতি যা আপনাকে একটি DOM এলিমেন্টের সাথে যুক্ত মোডাল ইনস্ট্যান্স পেতে বা এটি আরম্ভ না হলে একটি নতুন তৈরি করতে দেয়
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
ঘটনা
বুটস্ট্র্যাপের মডেল ক্লাস মোডাল কার্যকারিতার সাথে হুক করার জন্য কয়েকটি ইভেন্ট প্রকাশ করে। সমস্ত মডেল ইভেন্ট মডেল নিজেই (অর্থাৎ <div class="modal">
) এ গুলি করা হয়।
ইভেন্টের ধরণ | বর্ণনা |
---|---|
show.bs.modal |
এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন show ইনস্ট্যান্স পদ্ধতিটি কল করা হয়। যদি একটি ক্লিকের কারণে হয়, ক্লিক করা উপাদানটি relatedTarget ইভেন্টের সম্পত্তি হিসাবে উপলব্ধ। |
shown.bs.modal |
এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেলটি ব্যবহারকারীর কাছে দৃশ্যমান করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। যদি একটি ক্লিকের কারণে হয়, ক্লিক করা উপাদানটি relatedTarget ইভেন্টের সম্পত্তি হিসাবে উপলব্ধ। |
hide.bs.modal |
এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hide উদাহরণ পদ্ধতিটি কল করা হয়। |
hidden.bs.modal |
এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেলটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
hidePrevented.bs.modal |
এই ইভেন্টটি গুলি করা হয় যখন মোডালটি দেখানো হয়, এর ব্যাকড্রপ হয় static এবং মোডালের বাইরে একটি ক্লিক বা কীবোর্ড বিকল্পের সাথে একটি এস্কেপ কী প্রেস করা হয় বা data-bs-keyboard সেট করা হয় false ৷ |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})