First of all, you need some kind of trigger to open a modal. It may be a x-larastrap::button with the triggers_modal parameter enabled.
<x-larastrap::button triggers_modal="test1" label="Open Modal" />
<x-larastrap::modal id="test1">
<p>
This is a modal.
</p>
</x-larastrap::modal>
<button id="button-469c297769532dbec3d24c4f3245b4a5" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test1">Open Modal</button>
<div class="modal fade" id="test1" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-none">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
<p>
This is a modal.
</p>
</div>
<div class="modal-footer">
<button id="button-70f4fab3e165428ba41c080fe45f2d4f" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>A modal can have a title , to be displayed in the header (near the "close" button).
<x-larastrap::button triggers_modal="test-with-title" label="Open Modal" />
<x-larastrap::modal id="test-with-title" title="Test Modal">
<p>
This is a modal.
</p>
</x-larastrap::modal>
<button id="button-87374ce31a4d4279621fc914ea8e1124" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-with-title">Open Modal</button>
<div class="modal fade" id="test-with-title" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-none">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Test Modal
</h5>
</div>
<div class="modal-body">
<p>
This is a modal.
</p>
</div>
<div class="modal-footer">
<button id="button-e4f39030c603cd5f339c263c23dca81a" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Modals can have one or many buttons in his footer. The default configuration includes just the button to dismiss it, but you can modify it (both in the global configuration or with an inline parameter). The value of the buttons parameter has to be an array of arrays, each rappresenting a button and with the parameters for the relevant x-larastrap::button.
<x-larastrap::button triggers_modal="test-with-buttons" label="Open Modal" />
<x-larastrap::modal id="test-with-buttons" :buttons="[['color' => 'danger', 'label' => 'Dismiss', 'attributes' => ['data-bs-dismiss' => 'modal']]]">
<p>
This is a modal.
</p>
</x-larastrap::modal>
<button id="button-4ecd17cb22321047321df156b71d9b0e" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-with-buttons">Open Modal</button>
<div class="modal fade" id="test-with-buttons" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-none">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
<p>
This is a modal.
</p>
</div>
<div class="modal-footer">
<button id="button-e71ecb433390d47b78b6b291ac922909" class="btn btn-danger" data-bs-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>Also x-larastrap::form has buttons , and when a form appears into a modal the two arrays are merged and the form's buttons are placed in the modal's footer.
<x-larastrap::button triggers_modal="test-with-form" label="Open Modal" />
<x-larastrap::modal id="test-with-form">
<x-larastrap::form>
<x-larastrap::text label="A Sample Input" />
</x-larastrap::form>
</x-larastrap::modal>
<button id="button-8d3a5420bfdf2a9c51adeff1cef40e87" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-with-form">Open Modal</button>
<div class="modal fade" id="test-with-form" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-none">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
<form id="form-077dd079e3aadf3ff0667a8a39a1d330" class="" method="post" name="form-077dd079e3aadf3ff0667a8a39a1d330">
<input type="hidden" name="_token" value="kGdKbyKU0JHAY0eMuA60IoBbUxSX0lnps73zdEvR" autocomplete="off">
<div class="row mb-3">
<label for="input-f295392d0106d7e339a591313600107d" class="col-4 col-form-label">A Sample Input</label>
<div class="col-8">
<input id="input-f295392d0106d7e339a591313600107d" type="text" class="form-control" name="ZxnravIs0Z" value="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button id="button-1024ba7d2266eaf952705bd84b149a85" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button id="button-c3e4bb2a392b4c2130d664d72126d923" class="btn btn-primary" type="submit" form="form-077dd079e3aadf3ff0667a8a39a1d330">Save</button>
</div>
</div>
</div>
</div>
At least until you do not set the keep_buttons
parameter of the form as true
; in that case, form's buttons stay within the form itself. This is suggested, for example, when a modal contains multiple forms.
<x-larastrap::button triggers_modal="test-with-form-no-buttons" label="Open Another Modal" />
<x-larastrap::modal id="test-with-form-no-buttons">
<x-larastrap::form keep_buttons="true">
<x-larastrap::text label="A Sample Input in the first Form" />
</x-larastrap::form>
<hr>
<x-larastrap::form keep_buttons="true">
<x-larastrap::text label="A Sample Input in the second Form" />
</x-larastrap::form>
</x-larastrap::modal>
<button id="button-3651a8b83a15b93a4e0ed0ede5742340" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-with-form-no-buttons">Open Another Modal</button>
<div class="modal fade" id="test-with-form-no-buttons" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-none">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
<form id="form-51c1dd280010afe08b451a9034f1bd35" class="" method="post" name="form-51c1dd280010afe08b451a9034f1bd35">
<input type="hidden" name="_token" value="kGdKbyKU0JHAY0eMuA60IoBbUxSX0lnps73zdEvR" autocomplete="off">
<div class="row mb-3">
<label for="input-e2c544a5183cca325feeb09e7a0e28c0" class="col-4 col-form-label">A Sample Input in the first Form</label>
<div class="col-8">
<input id="input-e2c544a5183cca325feeb09e7a0e28c0" type="text" class="form-control" name="vL385Mbfnh" value="">
</div>
</div>
<div class="col-12 text-end">
<button id="button-f7309e80228bb63f54e23395b8604ebf" class="btn btn-primary" type="submit">Save</button>
</div>
</form>
<hr>
<form id="form-d3c50a0fe96d161e35202178d8d4b1f2" class="" method="post" name="form-d3c50a0fe96d161e35202178d8d4b1f2">
<input type="hidden" name="_token" value="kGdKbyKU0JHAY0eMuA60IoBbUxSX0lnps73zdEvR" autocomplete="off">
<div class="row mb-3">
<label for="input-cd69aa1695a9a5fb7d320007ed85630d" class="col-4 col-form-label">A Sample Input in the second Form</label>
<div class="col-8">
<input id="input-cd69aa1695a9a5fb7d320007ed85630d" type="text" class="form-control" name="cF8s5EepH7" value="">
</div>
</div>
<div class="col-12 text-end">
<button id="button-647915f3a4354c05a21b9db8cb87872f" class="btn btn-primary" type="submit">Save</button>
</div>
</form>
</div>
<div class="modal-footer">
<button id="button-90f3a797f910a6c18720a931083dbb0a" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It is possible to specify a size
for a modal, both as a short identifier (sm
, lg
, xl
, or none
for the default size) or as an array of classes to be applied for responsive behavior.
<x-larastrap::button triggers_modal="test-size-sm" label="Open SM Modal" />
<x-larastrap::button triggers_modal="test-size-lg" label="Open LG Modal" />
<x-larastrap::button triggers_modal="test-size-responsive" label="Open Responsive Modal" />
<x-larastrap::modal id="test-size-sm" size="sm">
<p>
This is a small modal.
</p>
</x-larastrap::modal>
<x-larastrap::modal id="test-size-lg" size="lg">
<p>
This is a large modal.
</p>
</x-larastrap::modal>
<x-larastrap::modal id="test-size-responsive" :size="['modal-xl', 'modal-fullscreen-md-down']">
<p>
The size of this modal changes accordingly the current breakpoint.
</p>
</x-larastrap::modal>
<button id="button-382d3cc441e2291da1992675ac85049e" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-size-sm">Open SM Modal</button> <button id="button-a3898281f128e4c0cdc6ad9d4083bb57" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-size-lg">Open LG Modal</button> <button id="button-574202c94b902e512535984e9ce1107e" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-size-responsive">Open Responsive Modal</button>
<div class="modal fade" id="test-size-sm" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
<p>
This is a small modal.
</p>
</div>
<div class="modal-footer">
<button id="button-25a8fdfca846144cd5befeb4ff9bf6d1" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="test-size-lg" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
<p>
This is a large modal.
</p>
</div>
<div class="modal-footer">
<button id="button-84fba6a09ba0ca61d7e5a73b16fd5b8b" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="test-size-responsive" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
<p>
The size of this modal changes accordingly the current breakpoint.
</p>
</div>
<div class="modal-footer">
<button id="button-d71393f0151a211648d5ec0f48ab00ed" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Use the scrollable parameter to permit the modal's contents to scroll.
<x-larastrap::button triggers_modal="test-scrollable" label="Open Modal" />
<x-larastrap::modal id="test-scrollable" scrollable="true">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed elementum tempus egestas sed sed risus pretium. Felis donec et odio pellentesque diam volutpat commodo sed. Turpis massa sed elementum tempus egestas sed sed. Arcu dictum varius duis at consectetur. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Ut ornare lectus sit amet est placerat in egestas. Cum sociis natoque penatibus et magnis. Habitasse platea dictumst quisque sagittis purus sit amet volutpat. At ultrices mi tempus imperdiet nulla. Faucibus ornare suspendisse sed nisi lacus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. At varius vel pharetra vel turpis nunc eget lorem dolor. Vulputate mi sit amet mauris commodo quis.
</p>
<p>
Amet facilisis magna etiam tempor orci eu. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Eu consequat ac felis donec et odio pellentesque. Sed augue lacus viverra vitae. Dui nunc mattis enim ut tellus elementum. Sem et tortor consequat id porta nibh venenatis cras. Ante metus dictum at tempor commodo. Et netus et malesuada fames ac turpis. Amet nisl purus in mollis nunc sed. Sit amet cursus sit amet dictum sit amet justo. Pretium vulputate sapien nec sagittis aliquam. Eget nullam non nisi est sit. Purus non enim praesent elementum facilisis leo vel fringilla. Purus in massa tempor nec.
</p>
<p>
Rhoncus urna neque viverra justo nec ultrices. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Sit amet est placerat in egestas erat. Mauris in aliquam sem fringilla ut morbi tincidunt. Nisi quis eleifend quam adipiscing vitae. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Rutrum quisque non tellus orci ac auctor augue mauris. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Odio facilisis mauris sit amet massa. Nunc id cursus metus aliquam eleifend mi. Auctor elit sed vulputate mi sit amet mauris. Aenean et tortor at risus. Gravida rutrum quisque non tellus orci ac auctor. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Nunc sed augue lacus viverra vitae congue.
</p>
</x-larastrap::modal>
<button id="button-b6f121e2e645e9e9185d0676683aabe5" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-scrollable">Open Modal</button>
<div class="modal fade" id="test-scrollable" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-none modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed elementum tempus egestas sed sed risus pretium. Felis donec et odio pellentesque diam volutpat commodo sed. Turpis massa sed elementum tempus egestas sed sed. Arcu dictum varius duis at consectetur. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Ut ornare lectus sit amet est placerat in egestas. Cum sociis natoque penatibus et magnis. Habitasse platea dictumst quisque sagittis purus sit amet volutpat. At ultrices mi tempus imperdiet nulla. Faucibus ornare suspendisse sed nisi lacus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. At varius vel pharetra vel turpis nunc eget lorem dolor. Vulputate mi sit amet mauris commodo quis.
</p>
<p>
Amet facilisis magna etiam tempor orci eu. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Eu consequat ac felis donec et odio pellentesque. Sed augue lacus viverra vitae. Dui nunc mattis enim ut tellus elementum. Sem et tortor consequat id porta nibh venenatis cras. Ante metus dictum at tempor commodo. Et netus et malesuada fames ac turpis. Amet nisl purus in mollis nunc sed. Sit amet cursus sit amet dictum sit amet justo. Pretium vulputate sapien nec sagittis aliquam. Eget nullam non nisi est sit. Purus non enim praesent elementum facilisis leo vel fringilla. Purus in massa tempor nec.
</p>
<p>
Rhoncus urna neque viverra justo nec ultrices. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Sit amet est placerat in egestas erat. Mauris in aliquam sem fringilla ut morbi tincidunt. Nisi quis eleifend quam adipiscing vitae. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Rutrum quisque non tellus orci ac auctor augue mauris. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Odio facilisis mauris sit amet massa. Nunc id cursus metus aliquam eleifend mi. Auctor elit sed vulputate mi sit amet mauris. Aenean et tortor at risus. Gravida rutrum quisque non tellus orci ac auctor. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Nunc sed augue lacus viverra vitae congue.
</p>
</div>
<div class="modal-footer">
<button id="button-a6a8c8d89d29e0cb8bcbb8e2ee884137" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>