Modal

The modal component is useful for displaying content that is overlayed on the primary page content.

Default Modal

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>

IMPORTANT: BladewindUI Modals are created, targetted and invoked using the 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.

Different Types

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.

Info 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>

Error 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>

Warning 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>

Success 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>

Different Sizes

On mobile the modal has just one size

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.

Tiny Modal

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>

Small 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>

Medium 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>

Big 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>

Large 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>

XL 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>

OMG Modal a.k.a Full Width 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>

Action Buttons

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.

No Cancel Button

                
                    <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>

No Okay Button

                
                    <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>

Hiding Both Action Buttons

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>

Action Button Actions

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.

Non-Dismissible Modal

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.

Refresh the page to get out of locked mode

                
                    <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>

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Modal component.

IMPORTANT: Projects running Laravel 8 please read this

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.

Modal with all attributes defined

                
                    <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>

The source file for this component is available in resources > views > components > bladewind > modal.blade.php and resources > views > components > bladewind > modal-icons.blade.php