Modal

Modal Alert

The modal alert provides some fluent methods for displaying modal dialog box on the page.

Features

Modal title

Most times you want to give your modal an explanatory title.

In the application

Alert::modal('You just completed your weekly goals')
->title('Congratulations')
->flash()

In the blade

 <x-alert-modal />

Modal message

You can pass a message directly in the modal method

Alert::modal('You just completed your weekly goals')
->flash()

or via the message method

Alert::modal()
->message('You just completed your weekly goals')
->flash()

Modal size

The size of the modal can be set by calling one of the available methods

Alert::modal()->small()->flash();
Alert::modal()->large()->flash();
Alert::modal()->extraLarge()->flash();
Alert::modal()->fullscreen()->flash();

Modal Position

The position of the modal on the screen can be controlled by calling one of the available methods

Alert::modal()->centered()->flash();

Modal Scrollability

To make the modal scrollable, you call the scrollable method

Alert::modal()->scrollable()->flash();

Modal Buttons

Sometimes we want to have some actions buttons on the modal. You can achieve this by calling the action and cancel methods

Alert::modal('Sure you want to approve request?')
->action('Yes', route('visa.approve', $request->id))
->cancel('Cancel')
->flash();

Modal View

The modal view allows you to pass a view to the modal

Example

1. Create a view - resources/views/form/signup.blade.php

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <form class="mt-3">
                <div class="mb-3">
                  <label for="email" class="form-label">Email address</label>
                  <input type="email" class="form-control" id="email" aria-describedby="emailHelp">
                  <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                </div>
                <div class="mb-3">
                  <label for="password" class="form-label">Password</label>
                  <input type="password" class="form-control" id="password">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>            
        </div>
    </div>
</div>

2. In the application

      Alert::modal()
      ->view(view('form.signup', ['name' => 'Emeka']))
      ->centered()
      ->flash();

3. Result

Modal levels

The modal level is the color of the modal title. Choose from any of the following.

Alert::modal(...)->primary();
Alert::modal(...)->secondary();
Alert::modal(...)->success();
Alert::modal(...)->info();
Alert::modal(...)->error();
Alert::modal(...)->warning();
Alert::modal(...)->light();
Alert::modal(...)->dark();