How to make custom field with modal form #246

guleswine · 2022-10-10T07:10:45Z

guleswine
Oct 10, 2022

Hello everyone
i want make custom field with use modal form.
but standard boostrap example wont work https://getbootstrap.com/docs/4.0/components/modal/

<button type="button" data-toggle="modal" data-target="#exampleModal">Launch modal</button>
or

$('#exampleModal').modal({
                    focus: true,
                    show: true
                });

<div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

Apparently, the processing of the modal form is blocked by some kind of internal backpack handler, any ideas how to work with this?

jcastroa87 · 2024-11-12T14:55:15Z

jcastroa87
Nov 12, 2024
Collaborator

Hello @guleswine

Sorry for late answer...

To make the modal works correctly, need to be the first element after <body>, so you need to customize the layout.

Here I have an example in Tabler theme, using "horizontal_dark" layout.

I copy the layout to resources/views/vendor/backpack/theme-tabler/layouts/horizontal_dark.blade.php
Then I add @yield('modal') after <body>
I create a Widget resources/views/vendor/backpack/theme-tabler/widgets/modal.blade.php
Then add this code (example):

@section('modal')
<div class="modal" id="exampleModal" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
            </div>
        </div>
    </div>
</div>
@endsection

And now you are free to add the button wherever you want

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

Here is the result:

Cheers.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to make custom field with modal form #246

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to make custom field with modal form #246

Uh oh!

Uh oh!

guleswine Oct 10, 2022

Replies: 1 comment

Uh oh!

jcastroa87 Nov 12, 2024 Collaborator

guleswine
Oct 10, 2022

jcastroa87
Nov 12, 2024
Collaborator