বুটস্ট্রাপ জেএস মোডাল রেফারেন্স | bootstrap JS Modal Reference
বুটস্ট্রাপ JS মোডাল (modal.js)
বুটস্ট্রাপ মোডাল প্লাগ-ইন হলো একটি ডায়ালগ বক্স/পপ-আপ উইন্ডো, যা বর্তমান পেজের উপরের অংশে প্রদর্শিত হয়।
বুটস্ট্রাপ মোডালের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ মোডাল টিউটোরিয়ালটি পড়ুন।
বুটস্ট্রাপ মোডাল প্লাগ-ইন ক্লাসসমূহ
| ক্লাস | বিবরণ |
|---|---|
.modal |
একটি মোডাল তৈরি করে। |
.modal-content |
মোডালকে বর্ডার, ব্যাকগ্রাউন্ড-কালার ইত্যাদির মাধ্যমে যথাযথ ভাবে স্টাইল করে। মোডালের হেডার, বডি এবং ফুটার যুক্ত করার জন্য এই ক্লাসটি ব্যবহার করুন। |
.modal-header |
মোডালের হেডারের জন্য স্টাইল ডিফাইন করে। |
.modal-body |
মোডালের বডির জন্য স্টাইল ডিফাইন করে। |
.modal-footer |
মোডালের ফুটারের জন্য স্টাইল ডিফাইন করে। নোটঃ
এই এরিয়াটি ডিফল্টভাবে ডানে এ্যালাইন করা থাকে। এটাকে ওভেরর-াইট করার জন্য সিএসএসের text-align:"left/center" প্রপার্টি ব্যবহার করুন। |
.modal-sm |
ছোট মোডাল তৈরি করার জন্য ব্যবহার করা হয়। |
.modal-lg |
বড় মোডাল তৈরি করার জন্য ব্যবহার করা হয়। |
.fade |
মোডালে ফেড ইন এবং ফেড আউট এনিমশন/ট্রানজিশন ইফেক্ট যুক্ত করে। |
বুটস্ট্রাপ data-* এট্রিবিউটের মাধ্যমে মোডাল ট্রিগার
যেকোনো একটি এলিমেন্টে data-toggle="modal" এবং data-target="#modalID" যুক্ত করুন।
নোটঃ<a> এলিমেন্টে data-target এট্রিবিউটটি বাদ দিন এবং তার পরিবর্তে href="#modalID" ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Modal Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>data-* এট্রিবিউটের মাধ্যমে মোডাল ট্রিগার</h2>
<!--বাটন দ্বারা মোডালে ক্লিক করুন-->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modalId">
মোডালে ক্লিক করুন
</button>
<!--মোডাল-->
<div class="modal fade" id="modalId">
<div class="modal-dialog">
<!--মোডাল কন্টেন্ট-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">মোডাল হেডার</h4>
</div>
<div class="modal-body">
<p>মোডালের কন্টেন্ট বা বডি।</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্টের মাধ্যমে ট্রিগার
ম্যানুয়েললি যুক্ত করার জন্যঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Modal Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>জাভাস্ক্রিপ্টের মাধ্যমে মোডাল ট্রিগার</h2>
<!--বাটন দ্বারা মোডালে ক্লিক করুন-->
<button type="button" class="btn btn-info btn-lg" id="btnId">মোডালে ক্লিক করুন</button>
<!--মোডাল-->
<div class="modal fade" id="modalId">
<div class="modal-dialog">
<!--মোডাল কন্টেন্ট-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">মোডাল হেডার</h4>
</div>
<div class="modal-body">
<p>মোডালের কন্টেন্ট বা বডি।</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#btnId").click(function(){
$("#modalId").modal();
});
});
</script>
</body>
</html>
ফলাফল
বুটস্ট্রাপ মোডাল অপশন
অপশন data এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। data এট্রিবিউটের ক্ষেত্রে, অপশনের নাম "data-" সাথে যুক্ত করুন। যেমন; data-keyboard=""
| নাম | ধরন | ডিফল্ট | বিবরণ | উদাহরণ |
|---|---|---|---|---|
backdrop |
boolean অথবা স্ট্রিং "static" |
true |
মোডালে একটি ধূসর ওভারলে থাকতে হবে কিনা তা নির্দিষ্ট করে।
আপনি যদি ভ্যালু |
JS/data উদাহরণ |
keyboard |
boolean |
true |
escape key (Esc) এর মাধ্যমে মোডাল ক্লোজ হবে কিনা তা নির্দিষ্ট করে:
|
JS/data উদাহরণ |
show |
boolean |
true |
মোডাল আরম্ভ হওয়ার সময় প্রদর্শিত হবে কিনা তা নির্দিষ্ট করে। |
বুটস্ট্রাপ মোডাল মেথড
নিচের টেবিলে মোডাল মেথডগুলো দেয়া হলো।
| মেথড | বিবরণ | উদাহরণ |
|---|---|---|
.modal(options) |
মোডালকে কন্টেন্ট হিসেবে সক্রিয় করে। ভ্যালিড ভ্যালুর জন্য উপরের অপশন দেখুন। | |
.modal("toggle") |
মোডালকে টোগল করে। | উদাহরণ দেখুন |
.modal("show") |
মোডালকে ওপেন করে। | উদাহরণ দেখুন |
.modal("hide") |
মোডালকে হাইড করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ মোডাল ইভেন্ট
নিচের টেবিলের মোডাল ইভেন্টগুলো দেয়া হলো।
| ইভেন্ট | বিবরণ | উদাহরণ |
|---|---|---|
show.bs.modal |
মোডালটি যখন প্রদর্শিত হয় তখন ঘটে। | উদাহরণ দেখুন |
shown.bs.modal |
মোডালটি প্রদর্শিত হওয়ার পর ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
hide.bs.modal |
মোডালটি যখন হাইড হয় তখন ঘটে। | উদাহরণ দেখুন |
hidden.bs.modal |
মোডালটি হাইড হওয়ার পর ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
উদাহরণ
বুটস্ট্রাপ লগ-ইন মোডাল
নিচের উদাহরণে লগ-ইনের জন্য একটি মোডাল তৈরি করা হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Modal Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-header, h4, .close {
background-color: #80dfff;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<h2>লগ-ইন মোডালেন উদাহরণ</h2>
<!-- বাটন দ্বারা মোডালটি ক্লিক করুন -->
<button type="button" class="btn btn-default btn-lg" id="btnId">লগ-ইন</button>
<!-- মোডাল -->
<div class="modal fade" id="modalId">
<div class="modal-dialog">
<!-- মোডাল কন্টেন্ট-->
<div class="modal-content">
<div class="modal-header" style="padding:15px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> লগ-ইন</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> ই-মেইল</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> পাসওয়ার্ড</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>মনে রাখার জন্য ক্লিক করুন</label>
</div>
<button type="submit" class="btn btn-primary btn-block">
<span class="glyphicon glyphicon-off"></span> লগ-ইন</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> বাদ দিন</button>
<p>আপনি কি এই ওয়েবসাইটের সদস্য নন? <a href="#">সাইন-আপ</a></p>
<p>পাসওয়ার্ড ভুলে গেলে এখানে ক্লিক করুন <a href="#">পাসওয়ার্ড?</a></p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#btnId").click(function(){
$("#modalId").modal();
});
});
</script>
</body>
</html>
ফলাফল