Sourceমোডাল
লাইটবক্স, ব্যৱহাৰকাৰী জাননী, বা সম্পূৰ্ণৰূপে স্বনিৰ্বাচিত বিষয়বস্তুৰ বাবে আপোনাৰ চাইটত সংলাপসমূহ যোগ কৰিবলে Bootstrap ৰ JavaScript মডাল প্লাগইন ব্যৱহাৰ কৰক।
কেনেকৈ কাম কৰে
Bootstrap ৰ মডাল উপাদানৰ সৈতে আৰম্ভ কৰাৰ আগতে, নিম্নলিখিত নিশ্চিতভাৱে পঢ়ক কাৰণ আমাৰ মেনু বিকল্পসমূহ শেহতীয়াকৈ সলনি হৈছে ।
মডালসমূহ HTML, CSS, আৰু JavaScript ৰ সৈতে নিৰ্মাণ কৰা হয়। সিহঁতক দস্তাবেজৰ বাকী সকলো বস্তুৰ ওপৰত স্থাপন কৰা হয় আৰু তাৰ পৰা স্ক্ৰল আঁতৰাই পেলায় <body>
যাতে ইয়াৰ পৰিৱৰ্তে মডাল বিষয়বস্তু স্ক্ৰল হয়।
মডাল “backdrop” ত ক্লিক কৰিলে স্বয়ংক্ৰিয়ভাৱে মডালটো বন্ধ হৈ যাব।
বুটষ্ট্ৰেপে এটা সময়ত কেৱল এটা মডাল উইন্ডো সমৰ্থন কৰে । নেষ্টেড মডালসমূহ সমৰ্থিত নহয় কাৰণ আমি ইয়াক ব্যৱহাৰকাৰী অভিজ্ঞতা দুৰ্বল বুলি বিশ্বাস কৰোঁ।
মডালসমূহে ব্যৱহাৰ কৰে position: fixed
, যি কেতিয়াবা ইয়াৰ ৰেণ্ডাৰৰ বিষয়ে অলপ বিশেষ হ'ব পাৰে। যেতিয়াই সম্ভৱ, অন্য উপাদানসমূহৰ পৰা সম্ভাৱ্য হস্তক্ষেপ এৰাই চলিবলৈ আপোনাৰ মডাল HTML এটা শীৰ্ষ-স্তৰৰ অৱস্থানত ৰাখক। আপুনি সম্ভৱতঃ .modal
অন্য এটা নিৰ্দিষ্ট উপাদানৰ ভিতৰত এটা নেষ্ট কৰাৰ সময়ত সমস্যাৰ সন্মুখীন হ'ব।
আকৌ এবাৰ, কাৰণ position: fixed
, মোবাইল ডিভাইচত মডাল ব্যৱহাৰ কৰাৰ ক্ষেত্ৰত কিছু সতৰ্কবাণী আছে। বিৱৰণৰ বাবে আমাৰ ব্ৰাউজাৰ সমৰ্থন নথিপত্ৰ চাওক।
HTML5 এ ইয়াৰ অৰ্থবোধ কেনেকৈ সংজ্ঞায়িত কৰে তাৰ বাবে, HTML autofocus
বৈশিষ্ট্যৰ বুটষ্ট্ৰেপ মডালত কোনো প্ৰভাৱ নাই। একে প্ৰভাৱ লাভ কৰিবলৈ, কিছুমান স্বনিৰ্বাচিত জাভাস্ক্রিপ্ট ব্যৱহাৰ কৰক:
$ ( ' #myModal ' ). on ( ' shown.bs.modal ' , function () {
$ ( ' #myInput ' ). trigger ( ' focus ' )
})
ডেমো আৰু ব্যৱহাৰৰ নিৰ্দেশনাৰ বাবে পঢ়ি থাকিব।
উদাহৰণ
মডাল উপাদানসমূহ
তলত এটা স্থিতিশীল মডাল উদাহৰণ দিয়া হৈছে (অৰ্থাৎ ইয়াৰ position
আৰু display
অভাৰৰাইড কৰা হৈছে)। অন্তৰ্ভুক্ত কৰা হৈছে মডাল হেডাৰ, মডাল বডি (ৰ বাবে প্ৰয়োজনীয় padding
), আৰু মডাল ফুটাৰ (ঐচ্ছিক)। আমি অনুৰোধ কৰোঁ যে আপুনি সম্ভৱ হ'লে বাতিল কাৰ্য্যসমূহৰ সৈতে মডাল হেডাৰসমূহ অন্তৰ্ভুক্ত কৰক, বা অন্য এটা স্পষ্ট বৰ্খাস্ত কাৰ্য্যসমূহ প্ৰদান কৰক।
মডাল বডি টেক্সট ইয়ালৈ যায়।
<div class= "modal" tabindex= "-1" role= "dialog" >
<div class= "modal-dialog" role= "document" >
<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" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<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>
ষ্টেটিক পটভূমি
যেতিয়া বেকড্ৰপক স্থিতিশীল লে সংহতি কৰা হয়, ইয়াৰ বাহিৰত ক্লিক কৰাৰ সময়ত মডাল বন্ধ নহ'ব। তলৰ বুটামটোত ক্লিক কৰি চেষ্টা কৰক।
মোৰ বাহিৰত ক্লিক কৰিলে মই বন্ধ নকৰো। আনকি escape key টিপিবলৈও চেষ্টা নকৰিব।
ষ্টেটিক বেকড্ৰপ মডাল আৰম্ভ কৰক
<!-- 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" tabindex= "-1" role= "dialog" aria-labelledby= "staticBackdropLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<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>
দীঘলীয়া বিষয়বস্তু স্ক্ৰল কৰা
যেতিয়া মডালসমূহ ব্যৱহাৰকাৰীৰ দৰ্শনপৰ্ট বা ডিভাইচৰ বাবে অতি দীঘল হয়, সিহঁতে পৃষ্ঠাটোৰ পৰা স্বাধীনভাৱে স্ক্ৰল কৰে। আমি কি বুজাব বিচাৰিছো চাবলৈ তলৰ ডেমোটো চেষ্টা কৰক।
ক্ৰাছ মেটিছ কনচেক্টেটাৰ পুৰুছ আমেট ফাৰ্মেণ্টাম বহা। ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। মৰ্বি লিও ৰিছাছ, পৰ্টা এ চি কনচেক্টেটুৰ এ চি, ইৰ'ছত ভেষ্টিবুলাম।
প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ভিভামাছ চেজিটিছ লেকাছ ভেল অগু লাওৰিট ৰুট্ৰাম ফ'চিবাছ ডলৰ অক্টৰ।
এনিয়ান লেচিনিয়া বাইবেণ্ডাম নুলা চেড কনচেক্টেটাৰ। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ডনেক চেড অডিঅ' ডুই। ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা।
ক্ৰাছ মেটিছ কনচেক্টেটাৰ পুৰুছ আমেট ফাৰ্মেণ্টাম বহা। ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। মৰ্বি লিও ৰিছাছ, পৰ্টা এ চি কনচেক্টেটুৰ এ চি, ইৰ'ছত ভেষ্টিবুলাম।
প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ভিভামাছ চেজিটিছ লেকাছ ভেল অগু লাওৰিট ৰুট্ৰাম ফ'চিবাছ ডলৰ অক্টৰ।
এনিয়ান লেচিনিয়া বাইবেণ্ডাম নুলা চেড কনচেক্টেটাৰ। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ডনেক চেড অডিঅ' ডুই। ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা।
ক্ৰাছ মেটিছ কনচেক্টেটাৰ পুৰুছ আমেট ফাৰ্মেণ্টাম বহা। ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। মৰ্বি লিও ৰিছাছ, পৰ্টা এ চি কনচেক্টেটুৰ এ চি, ইৰ'ছত ভেষ্টিবুলাম।
প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ভিভামাছ চেজিটিছ লেকাছ ভেল অগু লাওৰিট ৰুট্ৰাম ফ'চিবাছ ডলৰ অক্টৰ।
এনিয়ান লেচিনিয়া বাইবেণ্ডাম নুলা চেড কনচেক্টেটাৰ। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ডনেক চেড অডিঅ' ডুই। ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা।
ক্ৰাছ মেটিছ কনচেক্টেটাৰ পুৰুছ আমেট ফাৰ্মেণ্টাম বহা। ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। মৰ্বি লিও ৰিছাছ, পৰ্টা এ চি কনচেক্টেটুৰ এ চি, ইৰ'ছত ভেষ্টিবুলাম।
প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ভিভামাছ চেজিটিছ লেকাছ ভেল অগু লাওৰিট ৰুট্ৰাম ফ'চিবাছ ডলৰ অক্টৰ।
এনিয়ান লেচিনিয়া বাইবেণ্ডাম নুলা চেড কনচেক্টেটাৰ। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ডনেক চেড অডিঅ' ডুই। ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা।
ক্ৰাছ মেটিছ কনচেক্টেটাৰ পুৰুছ আমেট ফাৰ্মেণ্টাম বহা। ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। মৰ্বি লিও ৰিছাছ, পৰ্টা এ চি কনচেক্টেটুৰ এ চি, ইৰ'ছত ভেষ্টিবুলাম।
প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ভিভামাছ চেজিটিছ লেকাছ ভেল অগু লাওৰিট ৰুট্ৰাম ফ'চিবাছ ডলৰ অক্টৰ।
এনিয়ান লেচিনিয়া বাইবেণ্ডাম নুলা চেড কনচেক্টেটাৰ। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ডনেক চেড অডিঅ' ডুই। ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা।
ক্ৰাছ মেটিছ কনচেক্টেটাৰ পুৰুছ আমেট ফাৰ্মেণ্টাম বহা। ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। মৰ্বি লিও ৰিছাছ, পৰ্টা এ চি কনচেক্টেটুৰ এ চি, ইৰ'ছত ভেষ্টিবুলাম।
প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ভিভামাছ চেজিটিছ লেকাছ ভেল অগু লাওৰিট ৰুট্ৰাম ফ'চিবাছ ডলৰ অক্টৰ।
এনিয়ান লেচিনিয়া বাইবেণ্ডাম নুলা চেড কনচেক্টেটাৰ। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। ডনেক চেড অডিঅ' ডুই। ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা।
ডেমো মডাল আৰম্ভ কৰক
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalLong" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalLong" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLongTitle" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLongTitle" > 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>
আপুনি এটা স্ক্ৰ'ল কৰিব পৰা মডালও সৃষ্টি কৰিব পাৰে যি মডালৰ দেহ স্ক্ৰল কৰাৰ অনুমতি দিয়ে ত যোগ .modal-dialog-scrollable
কৰি .modal-dialog
।
ডেমো মডাল আৰম্ভ কৰক
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalScrollable" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalScrollable" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalScrollableTitle" aria-hidden= "true" >
<div class= "modal-dialog modal-dialog-scrollable" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalScrollableTitle" > 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>
উলম্বভাৱে কেন্দ্ৰীভূত
মডালক উলম্বভাৱে কেন্দ্ৰ .modal-dialog-centered
কৰিবলৈ to যোগ কৰক ।.modal-dialog
ক্ৰাছ মেটিছ কনচেক্টেটাৰ পুৰুছ আমেট ফাৰ্মেণ্টাম বহা। ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। মৰ্বি লিও ৰিছাছ, পৰ্টা এ চি কনচেক্টেটুৰ এ চি, ইৰ'ছত ভেষ্টিবুলাম।
উলম্বভাৱে কেন্দ্ৰীভূত মডাল
উলম্বভাৱে কেন্দ্ৰীভূত স্ক্ৰলযোগ্য মডাল
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalCenter" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalCenter" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalCenterTitle" aria-hidden= "true" >
<div class= "modal-dialog modal-dialog-centered" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalCenterTitle" > 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>
প্ৰয়োজন অনুসৰি টুলটিপ আৰু পপঅভাৰ মডালৰ ভিতৰত ৰাখিব পাৰি। যেতিয়া মডালসমূহ বন্ধ কৰা হয়, ভিতৰৰ যিকোনো টুলটিপ আৰু পপঅভাৰসমূহো স্বয়ংক্ৰিয়ভাৱে বাতিল কৰা হয়।
এটা মডালত Popover
এই বুটামে ক্লিক কৰিলে এটা পপঅভাৰ ট্ৰিগাৰ কৰে।
এটা মডালত টুলটিপছ
এই লিংক আৰু সেই লিংকৰ টুলটিপছ হোভাৰত আছে।
ডেমো মডাল আৰম্ভ কৰক
<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
. তাৰ পিছত, আপুনি অন্য ঠাইত কৰাৰ দৰে সাধাৰণ গ্ৰীড ব্যৱস্থাপ্ৰণালী শ্ৰেণীসমূহ ব্যৱহাৰ কৰক।
.কল-মড-৪
.কল-এমডি-৪ .মিলিলিটাৰ-অটো
.কল-এমডি-৩ .মিলিলিটাৰ-অটো
.কল-এমডি-২ .মিলিলিটাৰ-অটো
.কল-এমডি-৬ .মিলিলিটাৰ-অটো
স্তৰ ১: .col-sm-9
স্তৰ ২: .কল-৮ .কল-এছএম-৬
স্তৰ ২: .কল-৪ .কল-এছএম-৬
ডেমো মডাল আৰম্ভ কৰক
<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
।
@mdo ৰ বাবে মডাল খোলক
@fat ৰ বাবে মডাল খোলক
@getbootstrap ৰ বাবে মডাল খোলক
<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" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<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" role= "dialog" aria-labelledby= "..." aria-hidden= "true" >
...
</div>
গতিশীল উচ্চতা
যদি এটা মডালৰ উচ্চতা ই খোলা থকাৰ সময়ত সলনি হয়, আপুনি $('#myModal').modal('handleUpdate')
এটা স্ক্ৰলবাৰ ওলোৱাৰ ক্ষেত্ৰত মডালৰ অৱস্থান পুনৰায় সামঞ্জস্য কৰিবলে কল কৰিব লাগে।
অভিগম্যতা
role="dialog"
আৰু যোগ কৰাটো নিশ্চিত কৰক aria-labelledby="..."
, মডাল শিৰোনামৰ উল্লেখ কৰি, , .modal
আৰু নিজেই। অতিৰিক্তভাৱে, আপুনি আপোনাৰ মডাল সংলাপৰ এটা বিৱৰণ on ৰ সৈতে দিব পাৰে ।role="document"
.modal-dialog
aria-describedby
.modal
ইউটিউব ভিডিঅ’ এম্বেড কৰা
YouTube ভিডিঅ'সমূহ মডালত সন্নিৱিষ্ট কৰাৰ বাবে বুটষ্ট্ৰেপত নথকা অতিৰিক্ত জাভাস্ক্রিপ্টৰ প্ৰয়োজন হয় স্বয়ংক্ৰিয়ভাৱে প্লেবেক বন্ধ কৰিবলে আৰু অধিক। অধিক তথ্যৰ বাবে এই সহায়ক ষ্টেক অভাৰফ্ল' পোষ্ট চাওক ।
ঐচ্ছিক আকাৰসমূহ
মডালসমূহৰ তিনিটা বৈকল্পিক আকাৰ আছে, এটা ত স্থাপন কৰিবলে পৰিবৰ্তক শ্ৰেণীসমূহৰ যোগেদি উপলব্ধ .modal-dialog
। এই আকাৰসমূহে সংকীৰ্ণ দৰ্শনপৰ্টসমূহত অনুভূমিক স্ক্ৰলবাৰসমূহ এৰাই চলিবলৈ নিৰ্দিষ্ট ব্ৰেকপইন্টসমূহত কিক ইন কৰে।
আকাৰ
শ্ৰেণী
মডাল সৰ্বোচ্চ-প্ৰস্থ
সৰু
.modal-sm
300px
ডিফল্ট
একো নাই
500px
ডাঙৰ
.modal-lg
800px
অতিৰিক্ত ডাঙৰ
.modal-xl
1140px
পৰিবৰ্তক শ্ৰেণী অবিহনে আমাৰ অবিকল্পিত মডালে “মধ্যমীয়া” আকাৰৰ মডাল গঠন কৰে।
অতিৰিক্ত ডাঙৰ মডাল
ডাঙৰ মডাল
সৰু মডাল
<!-- Extra large modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-xl" > Extra large modal</button>
<div class= "modal fade bd-example-modal-xl" tabindex= "-1" role= "dialog" aria-labelledby= "myExtraLargeModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-xl" role= "document" >
<div class= "modal-content" >
...
</div>
</div>
</div>
<!-- Large modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-lg" > Large modal</button>
<div class= "modal fade bd-example-modal-lg" tabindex= "-1" role= "dialog" aria-labelledby= "myLargeModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-lg" role= "document" >
<div class= "modal-content" >
...
</div>
</div>
</div>
<!-- Small modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-sm" > Small modal</button>
<div class= "modal fade bd-example-modal-sm" tabindex= "-1" role= "dialog" aria-labelledby= "mySmallModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-sm" role= "document" >
<div class= "modal-content" >
...
</div>
</div>
</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
জাভাস্ক্রিপ্টৰ এটা শাৰীৰ সৈতে id ৰ সৈতে এটা মডাল কল কৰক :
$ ( ' #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
ইনষ্টেন্স পদ্ধতি কল কৰা হয়। যদি এটা ক্লিকৰ ফলত হয়, ক্লিক কৰা উপাদানটো relatedTarget
ইভেন্টৰ বৈশিষ্ট্য হিচাপে উপলব্ধ।
দেখুওৱা হৈছে.bs.modal
এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া মডালক ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। যদি এটা ক্লিকৰ ফলত হয়, ক্লিক কৰা উপাদানটো relatedTarget
ইভেন্টৰ বৈশিষ্ট্য হিচাপে উপলব্ধ।
লুকুৱাওক.bs.modal
এই ইভেন্ট তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hide
ইনষ্টেন্স পদ্ধতি কল কৰা হয়।
লুকাই থকা.bs.modal
এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া মডাল ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা শেষ হয় (CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)।
hideপ্ৰতিৰোধ কৰা.bs.modal
এই ইভেন্টটো ফায়াৰ কৰা হয় যেতিয়া মডাল দেখুওৱা হয়, ইয়াৰ পটভূমি হয় static
আৰু মডালৰ বাহিৰত এটা ক্লিক বা এটা এস্কেপ কি' টিপোৱা হয়।
$ ( ' #myModal ' ). on ( ' hidden.bs.modal ' , function ( e ) {
// do something...
})