برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.webyar.net/
مدال در بوت استرپ
مدال یک پنجره محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود. برای ساخت modal نیاز به کدهای html ، css وjava script دارید. ساخت مدال از صفر، کار بسیار سخت و پیچیده ای است ولی بوت استرپ (bootstrap) این کار را برای ما آسان کرده و لازم به کدنویسی های پیشرفته ای نداریم. با طراحی سایت وب یار همراه باشید تا نحوه ی ایجاد modal در بوت استرپ را به شما آموزش دهیم.
ساخت 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">×</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>
نتیجه ی قطعه کد بالا در تصویر زیر مشاهده می شود که با کلیک برروی دکمه open modal یک پنجره به صورت پاپ آپ باز می شود و با زدن علامت ضربدر و یا دکمه close و یا حتی با کلیک بر روی بک گراند مدال ، مدال بسته خواهد شد.
قسمت Trigger
برای باز شدن modal باید به یک لینک یا یک دکمه خصوصیت زیر را اختصاص دهید.
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 در بوت استرپ پرداخته شد. اگر به یادگیری بوت استرپ علاقمند هستید، می توانید مقالات دکمه ها در بوت استرپ، تصاویر در بوت استرپ، هشدارها در بوت استرپ، جداول در بوت استرپ و استایل دهی به متن در بوت استرپ را نیز مطالعه کنید.
تیم طراحی سایت وب یار همچنان آموزش های بوت استرپ را ادامه خواهد داد. با پیوستن به کانال @webyar_net می توانید از جدیدترین مقالات آموزشی تیم وب یار مطلع شوید.
نوشته modal ها در بوت استرپ اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.
