Level 75
A modal is just a basic div with display:none with styles and z index.
For a form you can simple load the form in an object inside the modal.
1 like
Jun 14, 2022
4
Level 1
How to create a modal in Nova 4
Please help me out with making a modal for a custom tool for laravel nova 4.
I can make a deletemodal but that is as far as I have gotten, I would love to just get a skeleton on making a simple modal with any single input text field please and thank you very much.
Level 1
@jlrdw I appreciate it thank you, but I'm trying to learn how to use Nova Components properly, and there is really no documentation on it, its why I was hoping to get an idea how to use it here
1 like
Level 75
@jangan here's a gist https://gist.github.com/blackfyre/ccd2a207948912594b5ac6cf67a11ef8
But like I said it's still a division.
Some of the other underlying code you have to write yourself.
1 like
Level 2
@jangan i feel you.
You can directly use the modal where you need it. It will be teleported to the right place inside nova.
Checkout the Nova Modal directly here: vendor/laravel/nova/resources/js/components/Modals/Modal.vue
Example
<Modal
:show="show"
maxWidth="screen-md"
tabindex="-1"
role="dialog"
>
<div>
<ModalHeader v-text="'Headline of Modal'" class="bg-gray-100 dark:bg-gray-700" />
// Your custom component
<report :data="reportData"></report>
<ModalFooter>
<div class="flex items-center ml-auto">
<CancelButton
component="button"
type="button"
dusk="cancel-action-button"
class="ml-auto mr-3"
@click="onClose"
/>
<DefaultButton
type="submit"
@click="onSubmit"
>
Submit
</DefaultButton>
</div>
</ModalFooter>
</div>
</Modal>
5 likes
Please or to participate in this conversation.