نویسنده پشتیبانی وب یار

امتیاز مطلب

تعداد بازدید 3014

تاریخ بروزرسانی ۲۸ فروردین ۱۴۰۱

modal در بوت استرپ

مدال در بوت استرپ

از افزونه مودال جاوا اسکریپت Bootstrap برای افزودن دیالوگ هایی به سایت خود برای لایت باکس ها، اعلان های کاربر یا محتوای کاملاً سفارشی استفاده می شود.

مدال یک پنجره محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود. برای ساخت modal نیاز به کدهای html ، css و java script دارید. ساخت مدال از صفر، کار بسیار سخت و پیچیده ای است ولی بوت استرپ (bootstrap) این کار را برای ما آسان کرده و لازم به کدنویسی های پیشرفته ای نداریم. با طراحی سایت اصفهان وب یار همراه باشید تا نحوه ی ایجاد modal در بوت استرپ را به شما آموزش دهیم.

نحوه کارکرد مدال بوت استرپ

قبل از شروع کار با مؤلفه مدال Bootstrap، حتماً موارد زیر را مرور کنید زیرا گزینه‌های منو در سال های اخیر تغییر کرده است.

مدال ها با HTML، CSS و جاوا اسکریپت ساخته می شوند. آنها روی هر چیز دیگری در سند قرار می گیرند و اسکرول را از <body> حذف می کنند تا محتوای مدال به جای آن اسکرول شود.
با کلیک بر روی “backdrop” به طور خودکار مودال بسته می شود.
بوت استرپ هر بار فقط از یک پنجره مدال پشتیبانی می کند. و مدال‌های تودرتو پشتیبانی نمی‌شوند، زیرا این نوع مدال ها تجربه کاربری ضعیفی را ارائه میدهند.
حالت استفاده مدال از موقعیت: ثابت، که گاهی اوقات می تواند کمی در مورد رندر آن خاص باشد. در صورت امکان، HTML مدال خود را در یک موقعیت سطح بالا قرار دهید تا از تداخل احتمالی عناصر دیگر جلوگیری شود. هنگام قرار دادن یک مدال در یک عنصر ثابت دیگر، احتمالاً با مشکلاتی مواجه خواهید شد

آموزش ساخت modal در بوت استرپ

برای ایجاد مدال در بوت استرپ به دو فایل bootstrap.css و bootstrap.js نیاز دارید. شما می توانید این فایل ها را از سایت بوت استرپ دانلود نمایید و در کدهایتان، آن ها را فراخوانی کنید. فایل bootstrap.css را در پوشه ای به نام css و فایل bootstrap.js را در پوشه ای به نام js قرار دهید. نحوه ی فراخوانی این دو فایل را می توانید در کد زیر مشاهده نمایید. یک فایل index.html بسازید و قطعه کد زیر را در آن قرار دهید.

<!DOCTYPE html>
<html lang="fa">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1 ">
		<title>bootstrap-18</title>
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
  <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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!DOCTYPE html>

<head>

<title>bootstrap-18</title>

</head>

<body>

<h2>Modal Example</h2>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<h4 class="modal-title">Modal Header</h4>

</div>

<p>Some text in the modal.</p>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</body>

</html>

نتیجه قطعه کد بالا در تصویر زیر مشاهده می شود که با کلیک برروی دکمه open modal یک پنجره به صورت پاپ آپ باز می شود و با زدن علامت ضربدر و یا دکمه close و یا حتی با کلیک بر روی بک گراند مدال ، مدال بسته خواهد شد.

قسمت Trigger

برای باز شدن modal باید به یک لینک یا یک دکمه خصوصیت زیر را اختصاص دهید.

 data-toggle="modal"  
data-target="#mymodal"

1 2	data-toggle="modal" data-target="#mymodal"

مقدار data-toggle نوع دکمه را مشخص می کند که از نوع مدال باشد و مقدار data-target هم شناسه یا آیدی مدال موردنظر است.

قسمت modal در بوت استرپ

div مربوط به مدال موردنظر باید یک id داشته باشد که مقدار این id باید با مقدار data-target یکسان باشد. اگر بخواهیم در یک صفحه چندین مدال بسازیم باید برای هر مدال یک آیدی منحصر به فرد در نظر بگیریم تا با مشکل مواجه نشویم.

برای فعال کردن و ایجاد فوکوس روی مدال باید به div موردنظر کلاس modal را بدهیم، کلاس fade هم برای قرار دادن افکت بر روی باز و بسته شدن مدال است که می توانید آن را حذف نمایید.

قسمت Modal Content

خصوصیت data-dismiss=”modal” باعث می شود مدال مورد نظر بسته شود و کلاس close هم برای استایل دهی به دکمه استفاده می شود. کلاس های modal-header، modal-body و modal-footer به ترتیب برای استایل دهی به قسمت هدر مدال، بدنه ی مدال و فوتر آن استفاده می شوند. بقیه ی کلاس ها نیز برای استایل دهی قسمت های مختلف مدال استفاده می شود. درصورتی که بخواهید استایل مدال خود را سفارشی سازید باید یک فایل style.css بسازید و لینک آن را در ایندکس بعد از لینک bootstrap.css قرار دهید و کدهای خود را در style.css قرار دهید.

سخن پایانی از modal در بوت استرپ

در این بخش از آموزش بوت استرپ ، به نحوه ی ساخت modal در بوت استرپ پرداخته شد. اگر به یادگیری بوت استرپ علاقمند هستید، می توانید مقالات دکمه ها در بوت استرپ، تصاویر در بوت استرپ، هشدارها در بوت استرپ، جداول در بوت استرپ و استایل دهی به متن در بوت استرپ را نیز مطالعه کنید.

تیم طراحی سایت وب یار همچنان آموزش های بوت استرپ را ادامه خواهد داد. با پیوستن به کانال webyar_net@ می توانید از جدیدترین مقالات آموزشی تیم وب یار مطلع شوید.