Modal

Pages

Users

Russell Crowe

russellcrowe@left4code.com

Charlize Theron

charlizetheron@left4code.com

Tom Cruise

tomcruise@left4code.com

Kevin Spacey

kevinspacey@left4code.com

Products

Sony Master Series A9G

Electronic

Nikon Z6

Photography

Notifications

Russell Crowe

05:09 AM

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20

Charlize Theron

01:10 PM

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi

Tom Cruise

01:10 PM

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Kevin Spacey

01:10 PM

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi

Edward Norton

01:10 PM

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Blank Modal

Show example code

Show Modal

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#basic-modal-preview" class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="basic-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content p-10 text-center"HTMLCloseTag This is totally awesome blank modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Modal Size

Show example code

Show Small Modal Show Medium Modal Show Large Modal Show Superlarge Modal

  HTMLOpenTagdiv class="text-center text-sm-left"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#small-modal-size-preview" class="button mr-1 mb-2 inline-block bg-theme-1 text-white"HTMLCloseTagShow Small ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#medium-modal-size-preview" class="button mr-1 mb-2 inline-block bg-theme-1 text-white"HTMLCloseTagShow Medium ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#large-modal-size-preview" class="button mr-1 mb-2 inline-block bg-theme-1 text-white"HTMLCloseTagShow Large ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#superlarge-modal-size-preview" class="button mr-1 mb-2 inline-block bg-theme-1 text-white"HTMLCloseTagShow Superlarge ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="small-modal-size-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content modal__content--sm p-10 text-center"HTMLCloseTag This is totally awesome small modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="medium-modal-size-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content p-10 text-center"HTMLCloseTag This is totally awesome medium modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="large-modal-size-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content modal__content--lg p-10 text-center"HTMLCloseTag This is totally awesome large modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="superlarge-modal-size-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content modal__content--xl p-10 text-center"HTMLCloseTag This is totally awesome superlarge modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Programmatically Show/Hide Modal

Show example code

  // Show modal cash('#programmatically-show-modal').on('click', function() { cash('#programmatically-modal').modal('show') }) // Hide modal cash('#programmatically-hide-modal').on('click', function() { cash('#programmatically-modal').modal('hide') }) // Toggle modal cash('#programmatically-toggle-modal').on('click', function() { cash('#programmatically-modal').modal('toggle') })

Warning Modal

Show example code

Show Modal

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#warning-modal-preview" class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="warning-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagOops...HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagSomething went wrong!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-dismiss="modal" class="button w-24 bg-theme-1 text-white"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="p-5 text-center border-t border-gray-200 dark:border-dark-5"HTMLCloseTag HTMLOpenTaga href="" class="text-theme-1 dark:text-theme-10"HTMLCloseTagWhy do I have this issue?HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Modal With Close Button

Show example code

Show Modal

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#button-modal-preview" class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="button-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content relative"HTMLCloseTag HTMLOpenTaga data-dismiss="modal" href="javascript:;" class="absolute right-0 top-0 mt-3 mr-3"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-8 h-8 text-gray-500"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="check-circle" class="w-16 h-16 text-theme-9 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagModal ExampleHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagModal with close buttonHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-dismiss="modal" class="button w-24 bg-theme-1 text-white"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Overlapping Modal

Show example code

Show Modal

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#overlapping-modal-preview" class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="overlapping-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content px-5 py-10"HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="mb-3"HTMLCloseTagClick button bellow to show overlapping modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#next-overlapping-modal-preview" class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow overlapping modalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="next-overlapping-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content p-10 text-center"HTMLCloseTag HTMLOpenTagdiv class="mb-2"HTMLCloseTagThis is totally awesome overlapping modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Header & Footer Modal

Show example code

Show Modal

Broadcast Message

From

Subject

Has the Words

Doesn't Have

Size

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#header-footer-modal-preview" class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="header-footer-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagBroadcast MessageHTMLOpenTag/h2HTMLCloseTag HTMLOpenTagbutton class="button border items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"HTMLCloseTag HTMLOpenTagi data-feather="file" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown sm:hidden"HTMLCloseTag HTMLOpenTaga class="dropdown-toggle w-5 h-5 block" href="javascript:;"HTMLCloseTag HTMLOpenTagi data-feather="more-horizontal" class="w-5 h-5 text-gray-700 dark:text-gray-600"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="dropdown-box w-40"HTMLCloseTag HTMLOpenTagdiv class="dropdown-box__content box dark:bg-dark-1 p-2"HTMLCloseTag HTMLOpenTaga href="javascript:;" class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="file" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="p-5 grid grid-cols-12 gap-4 row-gap-3"HTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagFromHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border mt-2 flex-1" placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagToHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border mt-2 flex-1" placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagSubjectHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border mt-2 flex-1" placeholder="Important Meeting"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagHas the WordsHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border mt-2 flex-1" placeholder="Job, Work, Documentation"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagDoesn't HaveHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border mt-2 flex-1" placeholder="Job, Work, Documentation"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagSizeHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagselect class="input w-full border mt-2 flex-1"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTag10HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag25HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag35HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag50HTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"HTMLCloseTag HTMLOpenTagbutton type="button" class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="button w-20 bg-theme-1 text-white"HTMLCloseTagSendHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Delete Modal

Show example code

Show Modal

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#delete-modal-preview" class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="delete-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagAre you sure?HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagDo you really want to delete these records? This process cannot be undone.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-dismiss="modal" class="button w-24 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="button w-24 bg-theme-6 text-white"HTMLCloseTagDeleteHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Success Modal

Show example code

Show Modal

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#success-modal-preview" class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="success-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="check-circle" class="w-16 h-16 text-theme-9 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagGood job!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagYou clicked the button!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-dismiss="modal" class="button w-24 bg-theme-1 text-white"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Tiny Slider Modal

Show example code

Show Modal

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#tiny-slider-modal-preview" class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="tiny-slider-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="p-5"HTMLCloseTag HTMLOpenTagdiv class="mx-6"HTMLCloseTag HTMLOpenTagdiv class="center-mode"HTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template" src="dist/images/preview-13.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template" src="dist/images/preview-10.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template" src="dist/images/preview-6.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template" src="dist/images/preview-1.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag