মোডাল
লাইটবক্স, ব্যবহারকারীর বিজ্ঞপ্তি বা সম্পূর্ণ কাস্টম সামগ্রীর জন্য আপনার সাইটে ডায়ালগ যোগ করতে বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট মডেল প্লাগইন ব্যবহার করুন।
কিভাবে এটা কাজ করে
বুটস্ট্র্যাপের মডেল কম্পোনেন্ট দিয়ে শুরু করার আগে, আমাদের মেনু বিকল্পগুলি সম্প্রতি পরিবর্তিত হওয়ায় নিম্নলিখিতটি পড়তে ভুলবেন না।
- এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে মোডাল তৈরি করা হয়। এগুলি নথিতে থাকা সমস্ত কিছুর উপরে অবস্থান করে এবং এর পরিবর্তে স্ক্রোলটি সরিয়ে দেয়
<body>
যাতে মডেল সামগ্রী স্ক্রোল করে। - মডেল "ব্যাকড্রপ" এ ক্লিক করলে স্বয়ংক্রিয়ভাবে মডেলটি বন্ধ হয়ে যাবে।
- বুটস্ট্র্যাপ একটি সময়ে শুধুমাত্র একটি মডেল উইন্ডো সমর্থন করে। নেস্টেড মডেলগুলি সমর্থিত নয় কারণ আমরা বিশ্বাস করি যে সেগুলি ব্যবহারকারীর অভিজ্ঞতা খারাপ৷
- মডেলগুলি ব্যবহার করে
position: fixed
, যা কখনও কখনও এর রেন্ডারিং সম্পর্কে কিছুটা নির্দিষ্ট হতে পারে। যখনই সম্ভব, অন্যান্য উপাদান থেকে সম্ভাব্য হস্তক্ষেপ এড়াতে আপনার মডেল এইচটিএমএলকে একটি শীর্ষ-স্তরের অবস্থানে রাখুন।.modal
অন্য একটি নির্দিষ্ট উপাদানের মধ্যে একটি নেস্ট করার সময় আপনি সম্ভবত সমস্যায় পড়বেন । - আবারও, এর কারণে
position: fixed
, মোবাইল ডিভাইসে মডেল ব্যবহার করার সাথে কিছু সতর্কতা রয়েছে। বিস্তারিত জানার জন্য আমাদের ব্রাউজার সমর্থন ডক্স দেখুন. - HTML5 কীভাবে তার শব্দার্থবিদ্যাকে সংজ্ঞায়িত করে তার কারণে, বুটস্ট্র্যাপ মডেলগুলিতে
autofocus
এইচটিএমএল অ্যাট্রিবিউটের কোনো প্রভাব নেই। একই প্রভাব অর্জন করতে, কিছু কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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-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-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-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-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-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-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 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-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-*
( সম্ভবত jQuery এর মাধ্যমে ) ব্যবহার করুন।
নীচে HTML এবং JavaScript উদাহরণ সহ একটি লাইভ ডেমো রয়েছে৷ আরও তথ্যের জন্য, বিশদ বিবরণের জন্য মডেল ইভেন্ট ডক্স পড়ুনrelatedTarget
।
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
অ্যানিমেশন পরিবর্তন করুন
ভেরিয়েবলটি মোডাল ফেইড-ইন অ্যানিমেশনের আগে $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').modal('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-open
করার জন্য যুক্ত করে এবং মডেলের বাইরে ক্লিক করার সময় দেখানো মডেলগুলি খারিজ করার জন্য একটি ক্লিক এলাকা প্রদান করে।<body>
.modal-backdrop
ডেটা অ্যাট্রিবিউটের মাধ্যমে
জাভাস্ক্রিপ্ট না লিখে একটি মডেল সক্রিয় করুন। data-toggle="modal"
একটি কন্ট্রোলার উপাদানের উপর সেট করুন, একটি বোতামের মতো, একটি সহ data-target="#foo"
বা href="#foo"
টগল করার জন্য একটি নির্দিষ্ট মডেলকে লক্ষ্য করতে।
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
জাভাস্ক্রিপ্টের মাধ্যমে
myModal
জাভাস্ক্রিপ্টের একটি লাইন সহ আইডি সহ একটি মডেল কল করুন :
$('#myModal').modal(options)
অপশন
বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-
, যেমনটি data-backdrop=""
।
নাম | টাইপ | ডিফল্ট | বর্ণনা |
---|---|---|---|
ব্যাকড্রপ | বুলিয়ান বা স্ট্রিং'static' |
সত্য | একটি মডেল-ব্যাকড্রপ উপাদান অন্তর্ভুক্ত। বিকল্পভাবে, static একটি পটভূমির জন্য নির্দিষ্ট করুন যা ক্লিকে মোডাল বন্ধ করে না। |
কীবোর্ড | বুলিয়ান | সত্য | এস্কেপ কী চাপলে মোডাল বন্ধ করে |
ফোকাস | বুলিয়ান | সত্য | আরম্ভ করার সময় মডেলের উপর ফোকাস রাখে। |
প্রদর্শন | বুলিয়ান | সত্য | আরম্ভ করার সময় মডেল দেখায়। |
পদ্ধতি
অ্যাসিঙ্ক্রোনাস পদ্ধতি এবং রূপান্তর
সমস্ত API পদ্ধতি অসিঙ্ক্রোনাস এবং একটি রূপান্তর শুরু করে । রূপান্তর শুরু হওয়ার সাথে সাথেই কিন্তু এটি শেষ হওয়ার আগেই তারা কলারের কাছে ফিরে আসে । উপরন্তু, একটি রূপান্তরকারী উপাদানের উপর একটি পদ্ধতি কল উপেক্ষা করা হবে ।
.modal(options)
একটি মডেল হিসাবে আপনার বিষয়বস্তু সক্রিয়. একটি ঐচ্ছিক বিকল্প গ্রহণ করে object
।
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
ম্যানুয়ালি একটি মডেল টগল করে। মডেলটি আসলে দেখানো বা লুকানোর আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।shown.bs.modal
hidden.bs.modal
$('#myModal').modal('toggle')
.modal('show')
ম্যানুয়ালি একটি মডেল খোলে। মডেলটি আসলে দেখানো হওয়ার আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।shown.bs.modal
$('#myModal').modal('show')
.modal('hide')
ম্যানুয়ালি একটি মডেল লুকিয়ে রাখে। মডেলটি আসলে লুকানো হওয়ার আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।hidden.bs.modal
$('#myModal').modal('hide')
.modal('handleUpdate')
ম্যানুয়ালি মোডালের অবস্থান পুনরায় সামঞ্জস্য করুন যদি একটি মোডেল খোলা থাকার সময় তার উচ্চতা পরিবর্তিত হয় (অর্থাৎ যদি একটি স্ক্রলবার উপস্থিত হয়)।
$('#myModal').modal('handleUpdate')
.modal('dispose')
একটি উপাদানের মডেল ধ্বংস করে।
ঘটনা
বুটস্ট্র্যাপের মডেল ক্লাস মোডাল কার্যকারিতার সাথে হুক করার জন্য কয়েকটি ইভেন্ট প্রকাশ করে। সমস্ত মডেল ইভেন্ট মডেল নিজেই (অর্থাৎ <div class="modal">
) এ গুলি করা হয়।
ইভেন্টের ধরণ | বর্ণনা |
---|---|
show.bs.modal | এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন show ইনস্ট্যান্স পদ্ধতিটি কল করা হয়। যদি একটি ক্লিকের কারণে হয়, ক্লিক করা উপাদানটি relatedTarget ইভেন্টের সম্পত্তি হিসাবে উপলব্ধ। |
দেখানো হয়েছে.bs.modal | এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেলটি ব্যবহারকারীর কাছে দৃশ্যমান করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। যদি একটি ক্লিকের কারণে হয়, ক্লিক করা উপাদানটি relatedTarget ইভেন্টের সম্পত্তি হিসাবে উপলব্ধ। |
hide.bs.modal | এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hide উদাহরণ পদ্ধতিটি কল করা হয়। |
hidden.bs.modal | এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেলটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
hidePrevented.bs.modal | এই ইভেন্টটি গুলি করা হয় যখন মোডালটি দেখানো হয়, এর ব্যাকড্রপ হয় static এবং মোডালের বাইরে একটি ক্লিক বা কীবোর্ড বিকল্পের সাথে একটি এস্কেপ কী প্রেস করা হয় বা data-keyboard সেট করা হয় false ৷ |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})