বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ JS মোডাল


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 মোডালে একটি ধূসর ওভারলে থাকতে হবে কিনা তা নির্দিষ্ট করে।

  • true - গাঢ় ওভারলে
  • false - কোন ওভারলে নাই (ট্রান্সপারেন্ট)

আপনি যদি ভ্যালু "static" নির্ধারন করেন, তাহলে মোডালের বাহিরে ক্লিক করলে মোডালটি ক্লোজ হবে না।

JS/data উদাহরণ
keyboard boolean true escape key (Esc) এর মাধ্যমে মোডাল ক্লোজ হবে কিনা তা নির্দিষ্ট করে:

  • true - মোডাল Esc এর মাধ্যমে ক্লোজ হবে।
  • false - মোডাল 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>

ফলাফল