মোডাল
লাইটবক্স, ব্যৱহাৰকাৰী জাননী, বা সম্পূৰ্ণৰূপে স্বনিৰ্বাচিত বিষয়বস্তুৰ বাবে আপোনাৰ চাইটত সংলাপসমূহ যোগ কৰিবলে Bootstrap ৰ JavaScript মডাল প্লাগইন ব্যৱহাৰ কৰক।
কেনেকৈ কাম কৰে
Bootstrap ৰ মডাল উপাদানৰ সৈতে আৰম্ভ কৰাৰ আগতে, নিম্নলিখিত নিশ্চিতভাৱে পঢ়ক কাৰণ আমাৰ মেনু বিকল্পসমূহ শেহতীয়াকৈ সলনি হৈছে ।
- মডালসমূহ HTML, CSS, আৰু JavaScript ৰ সৈতে নিৰ্মাণ কৰা হয়। সিহঁতক দস্তাবেজৰ বাকী সকলো বস্তুৰ ওপৰত স্থাপন কৰা হয় আৰু তাৰ পৰা স্ক্ৰল আঁতৰাই পেলায়
<body>
যাতে ইয়াৰ পৰিৱৰ্তে মডাল বিষয়বস্তু স্ক্ৰল হয়। - মডাল “backdrop” ত ক্লিক কৰিলে স্বয়ংক্ৰিয়ভাৱে মডালটো বন্ধ হৈ যাব।
- বুটষ্ট্ৰেপে এটা সময়ত কেৱল এটা মডাল উইন্ডো সমৰ্থন কৰে । নেষ্টেড মডালসমূহ সমৰ্থিত নহয় কাৰণ আমি ইয়াক ব্যৱহাৰকাৰী অভিজ্ঞতা দুৰ্বল বুলি বিশ্বাস কৰোঁ।
- মডালসমূহে ব্যৱহাৰ কৰে
position: fixed
, যি কেতিয়াবা ইয়াৰ ৰেণ্ডাৰৰ বিষয়ে অলপ বিশেষ হ'ব পাৰে। যেতিয়াই সম্ভৱ, অন্য উপাদানসমূহৰ পৰা সম্ভাৱ্য হস্তক্ষেপ এৰাই চলিবলৈ আপোনাৰ মডাল HTML এটা শীৰ্ষ-স্তৰৰ অৱস্থানত ৰাখক। আপুনি সম্ভৱতঃ.modal
অন্য এটা নিৰ্দিষ্ট উপাদানৰ ভিতৰত এটা নেষ্ট কৰাৰ সময়ত সমস্যাৰ সন্মুখীন হ'ব। - আকৌ এবাৰ, কাৰণ
position: fixed
, মোবাইল ডিভাইচত মডাল ব্যৱহাৰ কৰাৰ ক্ষেত্ৰত কিছু সতৰ্কবাণী আছে। বিৱৰণৰ বাবে আমাৰ ব্ৰাউজাৰ সমৰ্থন নথিপত্ৰ চাওক। - HTML5 এ ইয়াৰ অৰ্থবোধ কেনেকৈ সংজ্ঞায়িত কৰে তাৰ বাবে, HTML
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
কৰিবলৈ to যোগ কৰক ।.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>
টুলটিপছ আৰু পপঅভাৰ
প্ৰয়োজন অনুসৰি টুলটিপ আৰু পপঅভাৰ মডালৰ ভিতৰত ৰাখিব পাৰি। যেতিয়া মডালসমূহ বন্ধ কৰা হয়, ভিতৰৰ যিকোনো টুলটিপ আৰু পপঅভাৰসমূহো স্বয়ংক্ৰিয়ভাৱে বাতিল কৰা হয়।
<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" data-bs-dismiss="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" data-bs-dismiss="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>
জাভাস্ক্রিপ্টৰ জৰিয়তে
জাভাস্ক্রিপ্টৰ এটা শাৰীৰ সৈতে এটা মডাল সৃষ্টি কৰক:
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()
handleUpdate কৰক
মডালৰ অৱস্থান হস্তচালিতভাৱে পুনৰায় সামঞ্জস্য কৰক যদি এটা মডালৰ উচ্চতা ই খোলা থকাৰ সময়ত সলনি হয় (অৰ্থাৎ এটা স্ক্ৰলবাৰ উপস্থিত হ'লে)।
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 |
এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া মডালক ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। যদি এটা ক্লিকৰ ফলত হয়, ক্লিক কৰা উপাদানটো relatedTarget ইভেন্টৰ বৈশিষ্ট্য হিচাপে উপলব্ধ। |
hide.bs.modal |
এই ইভেন্ট তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hide ইনষ্টেন্স পদ্ধতি কল কৰা হয়। |
hidden.bs.modal |
এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া মডাল ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা শেষ হয় (CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। |
hidePrevented.bs.modal |
এই ইভেন্টটো জুই কৰা হয় যেতিয়া মডাল দেখুৱা হয়, ইয়াৰ পটভূমি হয় static আৰু মডালৰ বাহিৰত এটা ক্লিক বা এটা এস্কেপ কি' টিপক কিবৰ্ড বিকল্পৰ সৈতে সম্পাদন কৰা হয় বা data-bs-keyboard লে সংহতি কৰা হয় false । |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})