457 lines
26 KiB
PHP
457 lines
26 KiB
PHP
|
@extends('layout.master')
|
|||
|
|
|
|||
|
|
@push('plugin-styles')
|
|||
|
|
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
|||
|
|
@endpush
|
|||
|
|
|
|||
|
|
@section('content')
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
|||
|
|
<h1 class="page-title">Modal</h1>
|
|||
|
|
<p class="lead">Add dialogs to your site for lightboxes, user notifications, or completely custom content. Read the <a href="https://getbootstrap.com/docs/5.3/components/modal/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="default">Basic example</h4>
|
|||
|
|
<p class="mb-3">Below is a <em>static</em> modal example (meaning its <code>position</code> and <code>display</code> have been overridden).</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<div class="modal static" tabindex="-1">
|
|||
|
|
<div class="modal-dialog">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title">Modal title</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<p>Modal body text goes here.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="Default">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="modal" tabindex="-1">
|
|||
|
|
<div class="modal-dialog">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title">Modal title</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<p>Modal body text goes here.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="demo">Live demo</h4>
|
|||
|
|
<p class="mb-3">Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<!-- Button trigger modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
|||
|
|
Launch demo modal
|
|||
|
|
</button>
|
|||
|
|
<!-- Modal -->
|
|||
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="Demo">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Button trigger modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
|||
|
|
Launch demo modal
|
|||
|
|
</button>
|
|||
|
|
<!-- Modal -->
|
|||
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Demo">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="scrolling">Scrolling long content</h4>
|
|||
|
|
<p class="mb-3">When modals become too long for the user’s viewport or device, they scroll independent of the page itself.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<!-- Button trigger modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
|
|||
|
|
Launch demo modal
|
|||
|
|
</button>
|
|||
|
|
<!-- Modal -->
|
|||
|
|
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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>
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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>
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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>
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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>
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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>
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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 type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p class="my-3">You can also create a scrollable modal that allows scroll the modal body by adding <code>.modal-dialog-scrollable</code> to <code>.modal-dialog</code>.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<!-- Button trigger modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLongScollable">
|
|||
|
|
Launch demo modal
|
|||
|
|
</button>
|
|||
|
|
<!-- Modal -->
|
|||
|
|
<div class="modal fade" id="exampleModalLongScollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog modal-dialog-scrollable">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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>
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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>
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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>
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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>
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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>
|
|||
|
|
<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.</p>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|||
|
|
<p>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 type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="v-center">Vertically centered</h4>
|
|||
|
|
<p class="mb-3">Add <code>.modal-dialog-centered</code> to <code>.modal-dialog</code> to vertically center the modal.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<!-- Button trigger modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
|
|||
|
|
Launch demo modal
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<!-- Modal -->
|
|||
|
|
<div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog modal-dialog-centered">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="varying">Varying modal content</h4>
|
|||
|
|
<p class="mb-3">Have a bunch of buttons that all trigger the same modal with slightly different contents? Use <code >event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <code >data-bs-*</code> attributes</a> (possibly <a href="https://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
|
|||
|
|
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@fat">Open modal for @fat</button>
|
|||
|
|
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
|||
|
|
|
|||
|
|
<div class="modal fade" id="varyingModal" tabindex="-1" aria-labelledby="varyingModalLabel" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title" id="varyingModalLabel">New message</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<form>
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label for="recipient-name" class="form-label">Recipient:</label>
|
|||
|
|
<input type="text" class="form-control" id="recipient-name">
|
|||
|
|
</div>
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label for="message-text" class="form-label">Message:</label>
|
|||
|
|
<textarea class="form-control" id="message-text"></textarea>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|||
|
|
<button type="button" class="btn btn-primary">Send message</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="varyingContent">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@fat">Open modal for @fat</button>
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
|||
|
|
|
|||
|
|
<div class="modal fade" id="varyingModal" tabindex="-1" aria-labelledby="varyingModalLabel" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title" id="varyingModalLabel">New message</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<form>
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label for="recipient-name" class="form-label">Recipient:</label>
|
|||
|
|
<input type="text" class="form-control" id="recipient-name">
|
|||
|
|
</div>
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label for="message-text" class="form-label">Message:</label>
|
|||
|
|
<textarea class="form-control" id="message-text"></textarea>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|||
|
|
<button type="button" class="btn btn-primary">Send message</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#varyingContent">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
<figure class="highlight" id="varyingContentScript">
|
|||
|
|
<pre><code class="language-javascript"><script type="script/prism-javascript-markup">var varyingModal = document.getElementById('varyingModal')
|
|||
|
|
varyingModal.addEventListener('show.bs.modal', function (event) {
|
|||
|
|
// Button that triggered the modal
|
|||
|
|
var button = event.relatedTarget
|
|||
|
|
// Extract info from data-bs-* attributes
|
|||
|
|
var recipient = button.getAttribute('data-bs-whatever')
|
|||
|
|
// If necessary, you could initiate an AJAX request here
|
|||
|
|
// and then do the updating in a callback.
|
|||
|
|
//
|
|||
|
|
// Update the modal's content.
|
|||
|
|
var modalTitle = varyingModal.querySelector('.modal-title')
|
|||
|
|
var modalBodyInput = varyingModal.querySelector('.modal-body input')
|
|||
|
|
|
|||
|
|
modalTitle.textContent = 'New message to ' + recipient
|
|||
|
|
modalBodyInput.value = recipient
|
|||
|
|
})</script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#varyingContentScript">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="sizing">Optional sizes</h4>
|
|||
|
|
<p class="mb-3">Modals have three optional sizes. Add <code>.modal-sm</code>, <code>.modal-lg</code> or <code>.modal-xl</code> to <code>.modal-dialog</code> for additional sizes.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<!-- Extra large modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-xl">Extra large modal</button>
|
|||
|
|
<div class="modal fade bd-example-modal-xl" tabindex="-1" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog modal-xl">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title h4" id="myExtraLargeModalLabel">Extra large modal</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Large modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Large modal</button>
|
|||
|
|
|
|||
|
|
<div class="modal fade bd-example-modal-lg" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog modal-lg">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title h4" id="myLargeModalLabel">Large modal</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Small modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Small modal</button>
|
|||
|
|
|
|||
|
|
<div class="modal fade bd-example-modal-sm" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog modal-sm">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h5 class="modal-title h4" id="mySmallModalLabel">Small modal</h5>
|
|||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="Sizing">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Extra large modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-xl">Extra large modal</button>
|
|||
|
|
|
|||
|
|
<div class="modal fade bd-example-modal-xl" tabindex="-1" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog modal-xl">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Large modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Large modal</button>
|
|||
|
|
|
|||
|
|
<div class="modal fade bd-example-modal-lg" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog modal-lg">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Small modal -->
|
|||
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Small modal</button>
|
|||
|
|
|
|||
|
|
<div class="modal fade bd-example-modal-sm" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog modal-sm">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Sizing">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-2 content-nav-wrapper">
|
|||
|
|
<ul class="nav content-nav d-flex flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#default" class="nav-link">Basic example</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#demo" class="nav-link">Live demo</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#scrolling" class="nav-link">Scrolling long content</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#v-center" class="nav-link">Vertical centered</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#varying" class="nav-link">Varying modal content</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#sizing" class="nav-link">Optional sizes</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
@endsection
|
|||
|
|
|
|||
|
|
@push('plugin-scripts')
|
|||
|
|
<script>
|
|||
|
|
var varyingModal = document.getElementById('varyingModal')
|
|||
|
|
varyingModal.addEventListener('show.bs.modal', function (event) {
|
|||
|
|
// Button that triggered the modal
|
|||
|
|
var button = event.relatedTarget
|
|||
|
|
// Extract info from data-bs-* attributes
|
|||
|
|
var recipient = button.getAttribute('data-bs-whatever')
|
|||
|
|
// If necessary, you could initiate an AJAX request here
|
|||
|
|
// and then do the updating in a callback.
|
|||
|
|
//
|
|||
|
|
// Update the modal's content.
|
|||
|
|
var modalTitle = varyingModal.querySelector('.modal-title')
|
|||
|
|
var modalBodyInput = varyingModal.querySelector('.modal-body input')
|
|||
|
|
|
|||
|
|
modalTitle.textContent = 'New message to ' + recipient
|
|||
|
|
modalBodyInput.value = recipient
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
|||
|
|
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
|||
|
|
@endpush
|