نمادها

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

شما اینجا هستید

» آموزش طراحی وب » آموزش Bootstrap » آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

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

  • دسته بندی :آموزش Bootstrap,آموزش طراحی وب
    • آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

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

    آموزش Bootstrap 4 جلسه بیست و پنجم (Modal) از سری آموزش های تک قسمتی است.

     

    مودال

    قبلا در بوت استرپ ۳ درباره ساخت مودال صحبت کردیم اما برای آن دسته از عزیزان که نمیدانند مودال (modal) چیست باید بگوییم پنجره ای است که مانند پاپ آپ در همان صفحه باز میشود و اطلاعات آن مجزا از صفحه به نمایش در می آید و باز و بسته کردن آن تاثیری در صفحه ندارد . امکانات جدیدی به مودال اضافه شده است که در این آموزش به آن میپردازیم.

     

    ساخت Modal

    برای ساخت مودال به چند چیز نیاز داریم که مورد به مورد آن را بررسی میکنیم اول از هر چیز نیاز به یک دکمه داریم که مودال را با آن باز کنیم پس یک تگ  button با attribute با نام data-toggle و مقدار modal میسازیم همچنین نیاز به یک مقدار کلیدی داریم که ارتباط دکمه و مودال را برقرار کند پس attribute با نام data-target و مقدار یک آیدی دلخواه میسازیم .

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

    • header : در این قسمت هدر مودال قرار میگیرد که یک div با کلاس modal-header است.
    • body : در این قسمت محتوای مودال قرار میگیرد که یک div با کلاس modal-body است.
    • footer : در این قسمت فوتر مودال قرار میگیرد که یک div با کلاس modal-footer است.

    همچنین شما با کلاس modal-title در بخش header میتوانید برای مودال خود تایتل بگذارید.

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

    <!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

     

    اضافه کردن انیمیشن به مودال

    برای اضافه کردن انیمیشن یا همان افکت برای ظاهر شدن و محو شدن مودال نیاز به انجام کار پیچیده ای نیست تنها با یک کلاس ساده بوت استرپ میتوانید این کار را انجام دهید کافیست کلاس fade را در div که کلاس modal را دارد قرار دهید یعنی دقیقا در کنار کلاس modal کلاس fade را قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

    <div class="modal fade"></div>

    سایز مودال

    شما میتوانید اندازه مودال های خود را تعیین کنید بوت استرپ برای این مورد ۳ کلاس تعریف کرده که برای شما لیست میکنیم کافیست به هر سایزی که نیاز دارید کلاس آن را در کنار کلاس modal-dialog بنویسید:

    • سایز کوچک: برای ساخت مودال با سایز کوچک کافیست از کلاس modal-sm استفاده کنید.
    • سایز بزرگ : برای ساخت سایز بزرگ کافیست از کلاس modal-lg استفاده کنید.
    • سایز خیلی بزرگ : برای ساخت سایز نهایی کافیست از کلاس modal-xl استفاده کنید.

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

    <div class="modal-dialog modal-sm">
<div class="modal-dialog modal-lg">
<div class="modal-dialog modal-xl">

     

    قرار دادن مودال در وسط صفحه

    تا به اینجا تمام مودال هایی که ساختیم در قسمت بالای صفحه قرار گرفتند اگر قصد دارید مودالی بسازید که در وسط صفحه قرار گیرد کافیست از کلاس modal-dialog-centered در کنار کلاس modal-dialog استفاده کنید با همین یک کلاس مودال شما وسط صفحه قرار میگیرد و از ۴ طرف صفحه به یک اندازه فاصله میگیرد. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

    <div class="modal-dialog modal-dialog-centered">

    اسکرول خوردن مودال

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

    <div class="modal-dialog modal-dialog-scrollable">

     

    برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

    <!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
</head>

<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>




----------------------------------------------------------------------------
<div class="container">
  <h2>Fading Modal</h2>
  <p>Add the "fade" class to the modal container if you want the modal to fade in on open and fade out on close.</p>

  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal1">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

----------------------------------------------------------------------------
<div class="container">
  <h2>Small Modal</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal2">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>


----------------------------------------------------------------------------
<div class="container">
  <h2>Large Modal</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal3">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal3">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>
----------------------------------------------------------------------------
<div class="container">
  <h2>Extra Large Modal</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal4">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal4">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>
----------------------------------------------------------------------------
<div class="container">
  <h2>Centered Modal Example</h2>
  <p>Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class.</p>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal5">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal5">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>
----------------------------------------------------------------------------

<div class="container">
  <h2>Modal Scroll Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal6">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal6">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h1 class="modal-title">Modal Heading</h1>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <h3>Some text to enable scrolling..</h3>
          <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

          <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>
----------------------------------------------------------------------------
<div class="container">
  <h2>Modal Scroll Example</h2>
  <p>Use the .modal-dialog-scrollable class to enable scrolling inside the modal.</p>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal7">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal7">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h1 class="modal-title">Modal Heading</h1>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <h3>Some text to enable scrolling..</h3>
          <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

          <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

----------------------------------------------------------------------------
<br>
</body>
</html>

     

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

    آموزش Bootstrap 4 جلسه بیست و چهارم (Carousel)

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

     

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

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

    اگر این مطلب آموزنده بود به ما امتیاز دهید

    میانگین امتیاز / 5. تعداد آرا:

    اولین کسی باشید که رای میدهید


    • تاریخ ارسال
      2019/9/13
    • ارسال شده توسط
      amir
    • دیدگاه ها
      بدون دیدگاه
    • حجم دوره
      27.77 mb

    این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

    دانلود آموزش Bootstrap 4 جلسه بیست و پنجم (Modal): نوع فایل:mp4 حجم فایل:27.77 مگابایت

    هر پلیر اجرا کننده فایل ویدیویی

    بیشتر مشاهده کنید

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.