مدال ها
گروه های لیست یک جزء منعطف و قدرتمند برای نمایش یک سری محتوا هستند. آنها را تغییر دهید و گسترش دهید تا تقریباً از هر محتوایی پشتیبانی شود.
Modal در بوت استرپمثال
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#error-modal">Launch demo modal</button>
<div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 500px">
<div class="modal-content position-relative">
<div class="position-absolute top-0 end-0 mt-2 me-2 z-index-1">
<button class="btn-close btn btn-sm btn-circle d-flex flex-center transition-base" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="rounded-top-lg py-3 ps-4 pe-6 bg-light">
<h4 class="mb-1" id="modalExampleDemoLabel">Add a new illustration </h4>
</div>
<div class="p-4 pb-0">
<form>
<div class="mb-3">
<label class="col-form-label" for="recipient-name">Recipient:</label>
<input class="form-control" id="recipient-name" type="text" />
</div>
<div class="mb-3">
<label class="col-form-label" for="message-text">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
<button class="btn btn-primary" type="button">Understood </button>
</div>
</div>
</div>
</div>
پس زمینه ایستا
وقتی پسزمینه روی استاتیک تنظیم میشود، مودال هنگام کلیک کردن در خارج از آن بسته نمیشود. روی دکمه زیر کلیک کنید تا آن را امتحان کنید.
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Launch static backdrop modal</button>
<div class="modal fade" id="staticBackdrop" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg mt-6" role="document">
<div class="modal-content border-0">
<div class="position-absolute top-0 end-0 mt-3 me-3 z-index-1"><button class="btn-close btn btn-sm btn-circle d-flex flex-center transition-base" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body p-0">
<div class="bg-light rounded-top-lg py-3 ps-4 pe-6">
<h4 class="mb-1" id="staticBackdropLabel">Add a new illustration to the landing page</h4>
<p class="fs--2 mb-0">Added by <a class="link-600 fw-semi-bold" href="#!">Antony</a></p>
</div>
<div class="p-4">
<div class="row">
<div class="col-lg-9">
<div class="d-flex"><span class="fa-stack ms-n1 me-3"><i class="fas fa-circle fa-stack-2x text-200"></i><i class="fa-inverse fa-stack-1x text-primary fas fa-tag" data-fa-transform="shrink-2"></i></span>
<div class="flex-1">
<h5 class="mb-2 fs-0">Labels</h5>
<div class="d-flex"><span class="badge me-1 py-2 badge-soft-success">New</span><span class="badge me-1 py-2 badge-soft-primary">Goal</span><span class="badge me-1 py-2 badge-soft-info">Enhancement</span>
<div class="dropdown dropend"><button class="btn btn-sm btn-secondary px-2 fsp-75 bg-400 border-400 dropdown-toggle dropdown-caret-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-plus"></span></button>
<div class="dropdown-menu">
<h6 class="dropdown-header py-0 px-3 mb-0">Select Label</h6>
<div class="dropdown-divider"></div>
<div class="px-3"><button class="badge-soft-danger dropdown-item rounded-1 mb-2" type="button">New</button><button class="badge-soft-primary dropdown-item rounded-1 mb-2" type="button">Goal</button><button class="badge-soft-info dropdown-item rounded-1 mb-2" type="button">Enhancement</button></div>
<div class="dropdown-divider"></div>
<div class="px-3"><button class="btn btn-sm d-block w-100 btn-outline-secondary border-400">Create Label</button></div>
</div>
</div>
</div>
<hr class="my-4" />
</div>
</div>
<div class="d-flex"><span class="fa-stack ms-n1 me-3"><i class="fas fa-circle fa-stack-2x text-200"></i><i class="fa-inverse fa-stack-1x text-primary fas fa-align-left" data-fa-transform="shrink-2"></i></span>
<div class="flex-1">
<h5 class="mb-2 fs-0">Description</h5>
<p class="text-word-break fs--1">The illustration must match to the contrast of the theme. The illustraion must described the concept of the design. To know more about the theme visit the page. </p>
</div>
</div>
</div>
<div class="col-lg-3">
<h6 class="mt-5 mt-lg-0">Add To Card</h6>
<ul class="nav flex-lg-column fs--1">
<li class="nav-item me-2 me-lg-0"><a class="nav-link nav-link-card-details" href="#!"><span class="fas fa-user me-2"></span>Members</a></li>
<li class="nav-item me-2 me-lg-0"><a class="nav-link nav-link-card-details" href="#!"><span class="fas fa-tag me-2"></span>Label</a></li>
<li class="nav-item me-2 me-lg-0"><a class="nav-link nav-link-card-details" href="#!"><span class="fas fa-paperclip me-2"></span>Attachments</a></li>
<li class="nav-item me-2 me-lg-0"><a class="nav-link nav-link-card-details" href="#!"><span class="fa fa-align-left me-2"></span>Description </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
راهنمای ابزار و پاپاورها
در صورت نیاز، Tooltips و Popovers را می توان در مودال قرار داد. هنگامی که مدال ها بسته می شوند، هر راهنمایی ابزار و پاپاور درون نیز به طور خودکار رد می شود.
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#tooltippopovers">Launch modal with tooltips and pophover</button>
<div class="modal fade" id="tooltippopovers" tabindex="-1" aria-labelledby="tooltippopoversLabel" aria-hidden="true">
<div class="modal-dialog mt-6" role="document">
<div class="modal-content border-0">
<div class="position-absolute top-0 end-0 mt-2 me-2 z-index-1"><button class="btn-close btn btn-sm btn-circle d-flex flex-center transition-base" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body p-0">
<div class="bg-light rounded-top-lg py-3 ps-4 pe-6">
<h4 class="mb-1" id="tooltippopoversLabel">Tooltips and Pophover</h4>
</div>
<div class="p-4 pb-0">
<div class="row">
<div class="col">
<h5>Popover in a modal</h5>
<p>This <a class="btn btn-secondary popover-test" href="#!" role="button" title="Popover title" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<h5>Tooltips in a modal</h5>
<p><a class="tooltip-test" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">This link</a> and <a class="tooltip-test" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
پیمایش مطالب طولانی
هنگامی که مدال ها برای نمای کاربر یا دستگاه بسیار طولانی می شوند، مستقل از خود صفحه اسکرول می کنند. دمو زیر را امتحان کنید تا متوجه منظور ما شوید.
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#scrollinglongcontent">Launch Scrolling long content modal</button>
<div class="modal fade" id="scrollinglongcontent" data-keyboard="false" tabindex="-1" aria-labelledby="scrollinglongcontentLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="scrollinglongcontentLabel">Modal title</h5><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body modal-dialog modal-dialog-scrollable mt-0">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer"><button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-primary" type="button">Understood</button></div>
</div>
</div>
</div>