Docs Menu

Modals

Modals have the following properties which are optional:

Property Required? Type Options Description
backdrop no bool
  • true (default)
  • false
 Does the Input Group have a border.
bg no string
  • null (default)
  • transparent
  • warning
  • success
  • info
  • notice
 Background color of the Modal itself.
confirmBtn no bool
  • true (default)
  • false
 A confirmation button displayed in the footer of the modal. Will close modal on click.
icon no string Icon to be displayed at the top center of the modal (above any text content).
id no string Required and must be unique for each modal on the page.
size no string
  • null (default)
  • sm (small)
  • md (medium)
  • lg (large)
 Required and must be unique for each modal on the page.

Basic Examples
Basic Modal example. 

            
 1<x-fcui-modal id="modal1">
 2    <x-slot:content>
 3        <p class="text-center">
 4            Nunc viverra eleifend risus tincidunt sodales. Pellentesque et elit ornare, lobortis diam id,
 5            facilisis odio.
 6        </p>
 7    </x-slot:content>
 8 
 9    <x-slot:triggerButton>
10        <x-fcui-button size="default" classes="show-modal1">Show The Modal</x-fcui-button>
11    </x-slot:triggerButton>
12</x-fcui-modal>

Nunc viverra eleifend risus tincidunt sodales. Pellentesque et elit ornare, lobortis diam id, facilisis odio.

Advanced Example
Modal example 

            
 1<x-fcui-modal :backdrop="true" id="modal2" icon='<i class="fa-solid fa-thumbs-up"></i>' bg="success">
 2    <x-slot:content>
 3        <p class="text-center">
 4            Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 5            Maecenas augue magna, tincidunt sed tristique quis, eleifend vel sem.
 6        </p>
 7    </x-slot:content>
 8 
 9    <x-slot:triggerButton>
10        <x-fcui-button size="default" classes="show-modal2">Show The Modal</x-fcui-button>
11    </x-slot:triggerButton>
12</x-fcui-modal>

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue magna, tincidunt sed tristique quis, eleifend vel sem.