Bootstrap 5 Modal conflict

Question

I built a function to create automatically a modal to save time and make code more organized,as i would have the html and js related to the content of the modal all in one php file, instead of all mixed in the file which calls the modal :

function new_modal(title, content_php, attrs = []) {
    //creates html of modal
    html = '<div class="modal fade" id="main_modal" tabindex="-1" role="dialog">' +
        '<div class="modal-dialog modal-xl">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<h5 class="modal-title">' + (title || 'New Modal') + '</h5>' +
        '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
        '</div>' +
        '<div id="modal_content_loader" class="modal-body">' +
        '<p>Modal body text goes here.</p>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>';
    //attach hmtl to page
    $('body').append(html);

    //load php and show modal
    $("#modal_content_loader").load("modals/" + content_php, function() {
        $('#main_modal').modal({ show: true });
    });
    //(event)
    $('#main_modal').on('shown.bs.modal', function(event) {
            ...
        })
    //(event) + on close remove html from page
    $('#main_modal').on('hide.bs.modal', function(event) {
        ...
        $("#main_modal").remove();
    })
    //show modal
    $("#main_modal").modal("show");

}

The problem is that this is confliting with a lot of stuf and i have to ideia why:

• Ajax requests: buttons with submit type inside a form makes the page to reload on click instead of submit the form:

In a certain page

<button onclick="new_modal('teste','test.php')">Open Modal</button>

test.php

<form class="form">
    <label for="inputPassword5" class="form-label">Field</label>
    <input type="text" class="form-control">
    <button class="btn btn-success" type="submit">Submit</button>
</form>

• Jquery-confirm.js (info): If I have a button in a modal (from new_modal()) with onclick=($.confirm()) and in content I put some html with for example a form with an input, i cannot focus on it and the only interaction possible I have is with the plugin buttons (confirm/cancel):

<button onclick="open_confirm()">Open</button>
<script>
function open_confirm() {

        $.confirm({
            title: 'Validate Password',
            content: '<form class="form">'+
                    '<label for="inputPassword5" class="form-label">Password</label>'+
                    '<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">'+
                    '</form>',
            buttons: {
                confirm: function() {},
                cancel: function() {},
            }
        });
    }
</script>

I believe this is related to the modal from bootstrap,but im in the dark.What am i missing here? Thank you in advance.

JS Loaded (in order):

• jQuery v3.6.0
• jQuery UI - v1.12.1
• Bootstrap v5.0.0
• Latest Datatables
• Moment (info)
• scripts.js (js with the new_modal() function)
• jquery-confirm v3.3.4

Answer 1

OK. tabindex="-1" on modal was causing this to happen. Just in case any one has the same essue. more info