آموزش Bootstrap جلسه سی ام (Modal)

بازدید
7349

دسته بندی :آموزش Bootstrap,آموزش طراحی وب

در خدمت شما هستیم با آموزش Bootstrap جلسه سی ام (Modal)

آموزش Bootstrap جلسه سی ام (Modal) از سری آموزش های تک قسمتی است

سلام برنامه در این آموزش نحوه ساخت مودال را آموزش می دهد

قبلا در سایت نحوه ساخت مودال را آموزش داده بودیم اما در این آموزش این کار را با کلاس های بوت استرپ انجام میدهیم

در بوت استرپ با Data-toggle=modal می توانید مودال را معرفی کنید

همچنین با کلاس های خود بوت استرپ می توانید سایز مودال را نیز تعیین کنید

مواردی مثل دکمه close و … نیز با کلاس ها به راحتی قابل راه اندازی است

برای ساخت مودال نیاز با فایل modal.js و یا فایل bootstrap.js داریم استفاده از یکی از ۲ فایل کفایت میکند هر دو فایل را با هم اجرا نکنید.

ساخت مودال

همانطور که گفتیم برای ساخت مودال نیاز به اجرای فایل js آن است که اگر شما از بوت استرپ استفاده میکنید این فایل را قبلا اضافه کرده اید. برای داشتن یک Modal شما ابتدا باید یک دکمه ای داشته باشید که با کلیک روی آن مودال باز شود پس قبل از هر چیز یک button نیاز داریم که برای اجرا کردن مودال باید به آن data-toggle اضافه کنید با مقدار modal و همچنین برای ارتباط دکمه با مودال نیاز به data-target دارید که در آن باید id مودال خود را اضافه کنید که ما اینجا از آیدی myModal استفاده میکنیم.

مقدار data-toggle برای شما پنجره مودال را باز میکند. اما برای ساخت محتوای مودال نیز نیاز به چند div و کلاس های مخصوص مودال دارید. در اولین div ما از کلاس modal استفاده میکنیم. ما از role با مقدار dialog استفاده میکنیم این attribute این امکان را میدهد که کاربران شما با هر دستگاهی که سایت شما را باز کردند با نمایش مودال مشکلی نداشته باشند.

نمایش modal در دستگاه های مختلف

علاوه بر role که بالا توضیح دادیم ما به کلاسی برای استایل دهی در دستگاه های مختلف نیز نیاز داریم که بوت استرپ کلاس modal-dialog را برای ما ایجاد کرده است.مودال تشکیل شده از ۳ قسمت است مشابه یک سایت قسمت های مختلف مودال و کلاس های آن را برای شما لیست میکنیم:

هدر مودال : این قسمت اطلاعاتی مانند نام مودال، دکمه خروج یا همان close مدال در آن قرار میگیرد و کلاس آن modal-header است.
نام مودال: در این قسمت title قرار میگیرد که کلاس آن modal-title است.
اطلاعات مودال : در این قسمت کل اطلاعات مودال قرار میگیرد و با کلاس modal-content نمایش داده میشود.
بدنه مودال : مانند قسمت body سایت است و با کلاس modal-body نمایش داده میشود.
فوتر مودال : همانند فوتر سایت است و با کلاس modal-footer نمایش داده میشود.

علاوه بر موارد گفته شده مودال شامل موارد دیگری نیز هست مواردی مثل دکمه خروج که کلاس close و attribute با نام data-dismiss و مقدار modal میگیرد. توجه داشته باشید هرجا از data-dismiss استفاده کردیم آن دکمه قابلیت بستن مودال را به خود میگیرد.

برای واضح تر شدن مواردی گه گفتیم کد آماده مودالی برا برای شما قرار میدهیم که شامل تمام موارد گفته شده است:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 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.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

سایز مودال

آخرین مورد این بخش مربوط به اندازه مودال ها است که با کلاس های زیر نجام میشود.
برای این کار باید از ۲ کلاس با هم استفاده کنیم یکی کلاس modal-dialog و دیگری کلاس modal-sm که البته جای sm میتوانید مقادیر lg و… را نیز بگذارید.

برای واضح تر شدن موضوع از کد زیر کمک بگیرید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 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.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و نهم (Carousel)

آموزش Bootstrap جلسه سی و یکم (Tooltip)

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

و یا آن را در آپارات ببینید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

سلام برنامه | HiProgram

مرجع آموزش برنامه نویسی وب و اندروید

مطالب پربازدید

آخرین ارسالی ها

آموزش رفع محدودیت سایز آپلود در وردپرس

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

پکیج های آموزشی

پکیج طراحی قالب وردپرس

اتوماتیک کردن کارها در وردپرس

پکیج طراحی قالب جوملا ۳

آموزش تصویری html5

آموزش تصویری css3