Alpine Bootstrap Modal

modal.blade.php

<div name="{{ $name }}"
     x-cloak
     x-data="{ show: false, name: '{{ $name  }}', details: null }"
     @modal.window="
        show = ($event.detail.name === name);
        details = $event.detail;
     "
     @modal:close-all.window="show = false"
     class="modal d-block"
     tabindex="-1"
     @keydown.escape.window="show = false"
     x-bind:class="
        {
            'animate__animated animate__fadeInDown animate__faster show': show,
            'animate__animated animate__fadeOutUp': !show
        }
     "
     aria-labelledby="iamidLabel"
     aria-modal="true"
     role="dialog"
    {{ $attributes }}
>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ $title }}</h5>
                <button @click="show = false" type="button" class="btn-close"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ $slot }}
            </div>
            <div class="modal-footer">
                @if ($footer)
                    {{ $footer }}
                @else
                    <button @click="show = false; hide = !hide" type="button" class="btn font-weight-medium btn-primary text-white">
                        Ok
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>

modal.css

@import url('https://use.typekit.net/alq2klw.css');

/* Variables */
@import "_root.css";

/* Base Styles */
@import "ssh... company secret";
@import "ssh... company secret";

/* Components */
@import 'components/custom-form-switch.css';
@import 'components/spinner-speed.css';

/* Fontawesome pro */
@import "~@fortawesome/fontawesome-pro/css/all.min.css";

/* Animate.css */
@import "~animate.css/animate.min.css";

body {
    font-family: proxima-nova, Helvetica, sans-serif;
}

[x-cloak] {
    display: none !important;
    visibility: hidden;
    overflow: hidden
}

hey, can you share how you are calling it as well? the modal I mean, the button code to open the modal.

I'm new to Alpine so I am trying to learn the Bootstrap modal open and found your code.

Just wanted to check how are you passing different attributes, data, etc on button click.

I'll be grateful if you share this, thanks 😃