Skip to content

Instantly share code, notes, and snippets.

@andreaseriksson

andreaseriksson/bootstrap_modal_in_tailwind.html

Last active April 17, 2024 14:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andreaseriksson/af2b90211aff35ad9d04c4af1f86a4f6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andreaseriksson/af2b90211aff35ad9d04c4af1f86a4f6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. andreaseriksson renamed this gist Nov 26, 2019. 1 changed file with 0 additions and 0 deletions.
    0 index.html → bootstrap_modal_in_tailwind.html
    View file
    File renamed without changes.
  2. andreaseriksson created this gist Nov 26, 2019.
    23 changes: 23 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <!-- Button trigger modal -->
    <button type="button" class="inline-block font-normal text-center px-3 py-2 leading-normal text-base rounded cursor-pointer text-white bg-blue-600" data-toggle="modal" data-target="#exampleModalTwo">
    Launch modal two
    </button>

    <!-- Modal -->
    <div class="modal hidden fixed top-0 left-0 w-full h-full outline-none fade" id="exampleModalTwo" tabindex="-1" role="dialog">
    <div class="modal-dialog relative w-auto pointer-events-none max-w-lg my-8 mx-auto px-4 sm:px-0" role="document">
    <div class="relative flex flex-col w-full pointer-events-auto bg-white border border-gray-300 rounded-lg">
    <div class="flex items-start justify-between p-4 border-b border-gray-300 rounded-t">
    <h5 class="mb-0 text-lg leading-normal">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="relative flex p-4">
    ...
    </div>
    <div class="flex items-center justify-end p-4 border-t border-gray-300">
    <button type="button" class="inline-block font-normal text-center px-3 py-2 leading-normal text-base rounded cursor-pointer text-white bg-gray-600 mr-2" data-dismiss="modal">Close</button>
    <button type="button" class="inline-block font-normal text-center px-3 py-2 leading-normal text-base rounded cursor-pointer text-white bg-blue-600">Save changes</button>
    </div>
    </div>
    </div>
    </div>
    36 changes: 36 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    .modal {
    z-index: 1072;
    @apply hidden fixed top-0 left-0 w-full h-full outline-none
    }

    .modal.show {
    @apply block
    }

    .modal-backdrop {
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    @apply fixed bg-black top-0 left-0
    }

    .modal-backdrop.fade {
    @apply opacity-0
    }

    .modal-backdrop.show {
    @apply opacity-50
    }

    .modal.fade .modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,-50px);
    transform: translate(0,-50px);
    }

    .modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none;
    }