I'm triyng something with Livewire and Alpine Js. I've a checkbox that is opening a modal when checked:
<div x-data="{ showModal: false }" class="flex flex-col w-full md:w-full px-3 mb-6">
<input wire:model="projectOptions" x-on:click="showModal = true" name="projectOptions" value="1" type="checkbox" class="opacity-0 absolute">
<div x-show="showModal"
x-cloak
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0 transform"
x-transition:enter-end="opacity-100 transform"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center px-4 md:p-0">
<div @click.away="showModal = false" class="flex flex-col bg-white rounded-xl shadow-lg py-4 w-3/12">
<div class="flex mb-4 justify-around">
<h3 class="text-2xl font-semibold">Title</h3>
</div>
<div wire:ignore class="editor-layout" id="privacyContract">
<div x-data
x-ref="quillEditor"
x-init="toolbarOptions = ['bold', 'italic', {'list': 'bullet'}, 'align'];
quill2 = new Quill($refs.quillEditor,
{
theme: 'snow',
placeholder: 'Content here...',
modules: {
toolbar: toolbarOptions
}
});
quill2.on('text-change', function ()
{
$dispatch('input', quill2.root.innerHTML);
});"
wire:model.debounce.2000ms="privacyContract">
</div>
</div>
<div class="flex justify-end mr-4">
<button wire:loading.attr="disabled" class="">Send</button>
</div>
</div>
</div>
</div>
When I click outside modal it closing (with @click.away) but checkbox stays checked. How can I uncheck that checkbox when I click outside of modal?
Aucun commentaire:
Enregistrer un commentaire