bladewindUI
The modal component is useful for displaying content that is overlayed on the primary page content.
Modals are mostly displayed when an action is triggered, say when a button is clicked.
All BladewindUI modals are invoked via a javascript helper function bundled with the component.
showModal('name-of-modal');
. Like with all BladewindUI components,
the syntax for cooking up a modal is very simple.
<x-bladewind.button
onclick="showModal('tnc-agreement')">
Basic modal
</x-bladewind.button>
<x-bladewind.button
onclick="showModal('tnc-agreement-titled')">
Basic modal with a title
</x-bladewind.button>
<x-bladewind.modal
name="tnc-agreement">
Please agree to the terms and conditions of
the agreement before proceeding.
</x-bladewind.modal>
<x-bladewind.modal
name="tnc-agreement-titled"
title="Agree or Disagree">
Please agree to the terms and conditions of
the agreement before proceeding.
</x-bladewind.modal>
name
attribute.
You can have several modals on the same page but it is very important to provide unique names for each modal.
Clicking on the backdrop of the modal or on the cancel button will by default dismiss the modal. You probably guessed it. The hideModal('name-of-modal');
helper function is called to dismiss modals.
It is possible to prevent the backdrop or the cancel button from closing the modal. See the Non-dismissed modal section below.
The BladewindUI modal component comes prebuilt with some default types for the common use cases.
This can be achieved by setting the type
attribute on the modal component. The default type=""
.
All the type attribute does is append the appropriate icons that match the type of modal.
This requires that you set type="info"
on the modal component. The default icon changes to a blue info icon.
<x-bladewind.button onclick="showModal('info')">
Info Modal
</x-bladewind.button>
<x-bladewind.modal
type="info"
title="General Info"
name="info">
We really think you should buy some Bitcoin
despite it's ups and dowms. What sayeth thou?
</x-bladewind.modal>
This requires that you set type="error"
on the modal component. The default icon changes to a red exclamation mark.
<x-bladewind.button onclick="showModal('error')">
Error Modal
</x-bladewind.button>
<x-bladewind.modal
type="error"
title="Delete Not Allowed"
name="error">
You do not have permissions to delete this user.
</x-bladewind.modal>
This requires that you set type="warning"
on the modal component. The default icon changes to a yellow bell icon.
<x-bladewind.button onclick="showModal('warning')">
Warning Modal
</x-bladewind.button>
<x-bladewind.modal
type="warning"
title="First warning"
name="warning">
Hmmm...This is your first warning. Two more warnings and you are off this platform.
</x-bladewind.modal>
This requires that you set type="success"
on the modal component. The default icon changes to a green thumbs up icon.
<x-bladewind.button onclick="showModal('Success')">
Success Modal
</x-bladewind.button>
<x-bladewind.modal
type="success"
title="User Deleted"
name="success">
Yayy.. User deleted successfully
</x-bladewind.modal>
You could tell the above modals looked quite squashed. The BladewindUI modal component comes with a size option that allows your content to breath in the modals.
This can be achieved by setting the size
attribute on the modal component. The default size="small"
.
Below are all the available sizes. All sizes are the same on mobile.
This requires that you set size="tiny"
on the modal component.
<x-bladewind.button onclick="showModal('tiny-modal')">
Tiny Modal
</x-bladewind.button>
<x-bladewind.modal
size="tiny"
title="Tiny Modal"
name="tiny-modal">
I am the tiniest in the modal family. Don't hate.
</x-bladewind.modal>
This requires that you set size="small"
on the modal component.
<x-bladewind.button onclick="showModal('small-modal')">
Small Modal
</x-bladewind.button>
<x-bladewind.modal
size="small"
title="Small Modal"
name="small-modal">
I am the smallest in the modal family. Don't hate.
</x-bladewind.modal>
This requires that you set size="medium"
on the modal component.
This is the default so it is not really necessary to set the attribute on the component if you want to use the medium modal size.
<x-bladewind.button onclick="showModal('medium-modal')">
Medium Modal
</x-bladewind.button>
<x-bladewind.modal
title="Medium Modal"
name="medium-modal">
I am the medium sized modal. Also the default if you do not set a size.
</x-bladewind.modal>
This requires that you set size="big"
on the modal component.
<x-bladewind.button onclick="showModal('big-modal')">
Big Modal
</x-bladewind.button>
<x-bladewind.modal
size="big"
title="Big Modal"
name="big-modal">
English can be quite confusing. How is big different from large? You be the judge!
</x-bladewind.modal>
This requires that you set size="large"
on the modal component.
<x-bladewind.button onclick="showModal('large-modal')">
Large Modal
</x-bladewind.button>
<x-bladewind.modal
size="large"
title="Large Modal"
name="large-modal">
I am the large modal. If I am not large enough to contain your needs, check out my xl brother.
</x-bladewind.modal>
This requires that you set size="xl"
on the modal component.
<x-bladewind.button onclick="showModal('xl-modal')">
Xl Modal
</x-bladewind.button>
<x-bladewind.modal
size="xl"
title="XL Modal"
name="xl-modal">
I am the extra large modal. How do you like my size now. You could fill me up with some much needed content.
</x-bladewind.modal>
This requires that you set size="omg"
on the modal component.
<x-bladewind.button onclick="showModal('omg-modal')">
OMG Modal
</x-bladewind.button>
<x-bladewind.modal
size="omg"
title="Full Width Modal"
name="omg-modal">
I am the full width modal. My nickname is OMG. I take up the entire screen. I do not know why you will need a modal like this but well,
like they say, it is better to have and not use that need and not have.
</x-bladewind.modal>
The modal component by default shows a Cancel
and Okay
button.
Both buttons by default close the modal when clicked. It is possible to show either of the buttons or even none of the buttons.
If you don't want your buttons to say Cancel and Okay, set the cancel_button_label
and
ok_button_label
attributes to whatever text you want the buttons to display.
To hide the cancel
button, simply set cancel_button_label=""
. When the button label is blank, the button won't be displayed.
In the same way, to hide the primary button, the okay button in this case, simply set ok_button_label=""
. When the button label is blank, the button won't be displayed.
<x-bladewind.button onclick="showModal('no-cancel')">
No cancel button
</x-bladewind.button>
<x-bladewind.modal
title="No Cancel Button"
name="no-cancel"
cancel_button_label="">
I have no cancel button. Just okay and that is fine.
</x-bladewind.modal>
<x-bladewind.button onclick="showModal('no-okay')">
No okay button
</x-bladewind.button>
<x-bladewind.modal
title="No Okay Button"
name="no-okay"
ok_button_label="">
I have no okay button. Just cancel this thing and let's all go home.
</x-bladewind.modal>
Your guess is right. To hide both the okay and cancel buttons you can set
cancel_button_label=""
and ok_button_label=""
. However, there is a shorter way to achieve this.
Instead, set the show_action_buttons="false"
attribute. This will hide both action buttons.
A no-action-buttons modal can be useful if you want to have a form in a modal with its own button that submits the form.
<x-bladewind.button onclick="showModal('no-action-buttons')">No action buttons</x-bladewind.button>
<x-bladewind.modal
title="No Action Buttons"
name="no-action-buttons"
show_action_buttons="false">
I have no action buttons. Only the backdrop can close me now.
</x-bladewind.modal>
By default both action buttons close the modal. It is possible to change these default actions. To achieve this you will need to
set the cancel_button_action
and ok_button_action
attributes.
The default values are cancel_button_action="close"
and ok_button_action="close"
.
The attributes expect javascript functions as the values.
<x-bladewind.button onclick="showModal('custom-actions')">
CLick me for custom actions
</x-bladewind.button>
<x-bladewind.modal
size="big"
center_action_buttons="true"
type="warning"
title="Confirm User Deletion"
ok_button_action="alert('as you wish')"
cancel_button_action="alert('good choice')"
close_after_action="false"
name="custom-actions"
ok_button_label="Yes, delete"
cancel_button_label="don't delete">
Are you sure you want to delete this user? This action cannot be undone.
</x-bladewind.modal>
You will notice from the custom actions example above that we introduced a new attribute, center_action_buttons="true"
. This centres the action buttons in the action bar.
By default they are right aligned and might look off when using the small or medium modal sizes.
We also introduced the attribute close_after_action="false"
.
By default, the modal is dismissed after clicking any of the action buttons. Setting this attribute to false
will ensure the modal stays open after clicking any of the action buttons.
By default the modal component can be closed using the backdrop or any of the action buttons. There are cases when you really don't want the user to dismiss the modal until a choice has been made or an action has been performed.
Getting this result is simple. Just set backdrop_can_close="false"
. If you are using the modals with the action buttons you will also need to set the actions of each button. See Action Buttons above.
In this example, we assume your app is very data sensitive and you want users to be able to lock their screens when stepping away from their computers.
<x-bladewind.button onclick="showModal('lock-screen')">
<svg>...</svg> lock the screen
</x-bladewind.button>
<x-bladewind.modal
show_action_buttons="false"
backdrop_can_close="false"
name="lock-screen">
<div class="flex mx-auto justify-center my-2">
<x-bladewind.avatar class="" image="/path/to/the/image/file" />
</div>
<div class="my-4">
You will need to unlock the screen to continue using this application.
</div>
<x-bladewind.input
placeholder="Enter your password to unlock"
type="password" />
<x-bladewind.button class="w-full">Check password</x-bladewind.button>
</x-bladewind.modal>
The table below shows a comprehensive list of all the attributes available for the Modal component.
Option | Default | Available Values |
---|---|---|
type | blank | info error warning success |
title | blank | String. Defines the title of the modal. |
name | bw-modal | Uniquely identifies a modal. This attribute is very important if you want to prevent erratic behaviour of modals. |
ok_button_label | okay | Specify the label to be displayed on the primary action button. |
cancel_button_label | cancel | Specify the label to be displayed on the secondary action button. |
ok_button_action | close | Expects a javascript function that will be called when the primary action button is clicked. |
cancel_button_action | close | Expects a javascript function that will be called when the secondary action button is clicked. |
close_after_action | true | Specifies whether the modal stays open after any of the action buttons are clicked. Value needs to be set as a string not boolean.true false |
backdrop_can_close | true | Specifies whether clicking on the modal backdrop should close the modal. Value needs to be set as a string not boolean.true false |
show_action_buttons | true | Specifies whether the action buttons should be displayed. Value needs to be set as a string not boolean.true false |
center_action_buttons | true | Specifies whether the action buttons should be centered in the action bar. Value needs to be set as a string not boolean.true false |
size | medium | Defines the size of the modal. Arranged from smallest to largest. tiny small medium
big large xl omg |
class | blank | Any additonal css classes can be added using this attribute. |
<x-bladewind.modal
type="warning"
title="Modal with all features"
name="full-modal"
ok_button_label="yes"
cancel_button_label="no"
close_after_action="false"
ok_button_action="alert('say ok')"
cancel_button_action="alert('say nay')"
backdrop_can_close="false"
show_action_buttons="false"
center_action_buttons="true"
size="medium"
class="shadow-sm">
...
</x-bladewind.modal>
resources > views > components > bladewind > modal.blade.php
and
resources > views > components > bladewind > modal-icons.blade.php