<!-- nosimple -->
<div x-data="{modalShow: false}">
    <button @click="modalShow = true" class="button">Open Modal</button>

    <div x-show="modalShow"
        x-transition:enter="animation-fade"
        x-transition:leave="animation-fadeout"
        class="pos-fixed pos0-l pos0-t h100 w100 z-index99 bg-op60" x-cloak>

    	<div @click.away="modalShow = false" class="pos-absolute w100  w600px-max" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">

            <div class="pos-relative bg-white" x-show="modalShow" x-transition:enter="animation-top">

                <span @click="modalShow = false" class="pos-absolute pos10-r pos0-t t150 t-white hover-t-gray200 cursor-pointer">&times;</span>

                <div class="pad10 bg-blue600 t-white">Header</div>

                <div class="pad20-tb pad10-rl">
                    Content
                </div>

                <div class="pad10 bg-gray100 t-gray600">Footer</div>
            </div>
        </div>
    </div>
</div>
<!-- /nosimple -->