উদাহরণঃ JS/data-* ব্যবহার করে backdrop অপশনের ব্যবহার
<!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>মোডাল অপশন backdrop</h2>
<p>এই উদাহরণটিতে প্রথম মোডালে JS এবং দ্বিতীয় মোডালে data-backdrop="" এট্রিবিউট ব্যবহার করে
backdrop অপশন দেখানো হয়েছে।</p>
<!-- বাটন দ্বারা মোডালটি ক্লিক করুন -->
<button type="button" class="btn btn-info btn-md" id="btnId1">মোডাল (backdrop:true)</button>
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#modalId2"
data-backdrop="false">মোডাল (backdrop:false)</button>
<!-- মোডাল -->
<div class="modal fade" id="modalId1" role="dialog">
<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 class="modal fade" id="modalId2" role="dialog">
<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>
<p><strong>নোটঃ</strong> এই মোডালের ক্ষেত্রে মোডালের বাহিরে ক্লিক করলেও ক্লোজ হবে না।</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(){
$("#btnId1").click(function(){
$("#modalId1").modal({backdrop: true});
});
});
</script>
</body>
</html>
ফলাফল
উদাহরণঃ JS/data-* ব্যবহার করে keyboard অপশনের ব্যবহার
<!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>মোডাল অপশন keyboard</h2>
<p>এই উদাহরণটিতে প্রথম মোডালে JS এবং দ্বিতীয় মোডালে data-keyboard="" এট্রিবিউট ব্যবহার করে
keyboard অপশন দেখানো হয়েছে।</p>
<p>escape key (Esc) এর মাধ্যমে মোডাল ক্লোজ হবে কিনা তা নির্দিষ্ট করার জন্য <strong>keyboard</strong>
অপশন ব্যবহার করা হয়।</p>
<p><strong>নোট:</strong> মোডাল উইন্ডোটি প্রদর্শন করানোর জন্য Tab বাটনে ক্লিক করুন এবং ক্লোজ করার জন্য Esc
বাটনে ক্লিক করুন।</p>
<!-- বাটন দ্বারা মোডালটি ক্লিক করুন -->
<button type="button" class="btn btn-info btn-md" id="btnId1">মোডাল(js) (keyboard:true)</button>
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#modalId2"
data-keyboard="false">মোডাল(data) (keyboard:false)</button>
<!-- মোডাল -->
<div class="modal fade" id="modalId1" role="dialog">
<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>কী-বোর্ডের escape কী তে চাপ দিলে এই মোডালটি বন্ধ হয়ে যাবে।</p>
<p><strong>নোট:</strong> মোডাল উইন্ডোটি প্রদর্শন করানোর জন্য Tab বাটনে ক্লিক করুন এবং ক্লোজ
করার জন্য Esc বাটনে ক্লিক করুন।</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ করুন</button>
</div>
</div>
</div>
</div>
<!-- মোডাল -->
<div class="modal fade" id="modalId2" role="dialog">
<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>কী-বোর্ডের escape কী তে চাপ দিলেও এই মোডালটি ক্লোজ হবে না।</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(){
$("#btnId1").click(function(){
$("#modalId1").modal({keyboard: true});
});
});
</script>
</body>
</html>
ফলাফল
উদাহরণঃ toggle মেথডের ব্যবহার
<!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>
<p>মোডালকে ম্যানুয়েললি টোগল করার জন্য <strong>toggle</strong> মেথড ব্যবহার করা হয়।</p>
<!-- বাটন দ্বারা মোডালটি ক্লিক করুন -->
<button type="button" class="btn btn-info btn-md" id="btnId">টোগল মোডাল</button>
<!-- মোডাল -->
<div class="modal fade" id="modalId" role="dialog">
<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("toggle");
});
});
</script>
</body>
</html>
ফলাফল
উদাহরণঃ show এবং hide মেথডের ব্যবহার
<!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>
#btnId {
width: 300px;
padding: 10px;
font-size:20px;
position: absolute;
margin: 0 auto;
right: 0;
left: 0;
bottom: 50px;
z-index: 9999;
}
</style>
</head>
<body>
<div class="container">
<h2>মোডাল মেথড</h2>
<p><strong>show</strong> মেথড দ্বারা মোডালকে প্রদর্শণ করানো হয় এবং <strong>hide</strong> মেথড দ্বারা
মোডালকে হাইড করানো হয়।</p>
<!-- বাটন দ্বারা মোডালটি ক্লিক করুন -->
<button type="button" class="btn btn-info btn-md" id="btnId">হাইড মোডাল</button>
<!-- মোডাল -->
<div class="modal fade" id="modalId" role="dialog">
<div class="modal-dialog">
<!-- মোডাল কন্টেন্ট -->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">মোডাল মেথড</h4>
</div>
<div class="modal-body">
<p><strong>show</strong> মেথড দ্বারা মোডালকে প্রদর্শণ করানো হয় এবং <strong>hide</strong> মেথড দ্বারা
মোডালকে হাইড করানো হয়।</p>
<p>পূনরায় পেজ রিফ্রেশ করুন।</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
// পেজটি লোডিং এর সাথে সাথে মোডালটি প্রদর্শিত হয়।
$("#modalId").modal("show");
// মোডালকে হাইড করে।
$("#btnId").click(function(){
$("#modalId").modal("hide");
});
});
</script>
</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>
<h3>মোডাল ওপেন এবং ক্লোজ করুন</h3>
<!-- বাটন দ্বারা মোডালটি ক্লিক করুন -->
<button type="button" class="btn btn-info btn-lg" id="btnId">ওপেন মোডাল</button>
<!-- মোডাল -->
<div class="modal fade" id="modalId" role="dialog">
<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>মোডালটি যখন প্রদর্শিত হতে যাচ্ছে তখন <strong>show.bs.modal</strong> ইভেন্টটি কাজ করে।</p>
<p>মোডালটি যখন প্রদর্শিত হওয়ার পর <strong>shown.bs.modal</strong> ইভেন্টটি ঘটে।</p>
<p> মোডালটি যখন হাইড হয় তখন <strong>hide.bs.modal</strong> ইভিন্টটি ঘটে।</p>
<p>মোডালটি পুরোপুরি হাইড হওয়ার পর <strong>hidden.bs.modal</strong> ইভেন্টটি ঘটে
(সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর)।</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("show");
});
$("#modalId").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$("#modalId").on('shown.bs.modal', function () {
alert('The modal is fully shown.');
});
$("#modalId").on('hide.bs.modal', function () {
alert('The modal is about to be hidden.');
});
$("#modalId").on('hidden.bs.modal', function () {
alert('The modal is now hidden.');
});
});
</script>
</body>
</html>
ফলাফল
