Editor modal is not closing regardless of where I click. Bootstrap 5

Editor modal is not closing regardless of where I click. Bootstrap 5

tannerndtannernd Posts: 3Questions: 2Answers: 0


I am using Bootstrap 5 and when I open an editor modal it will not close regardless of where I click. I have tried

  • clicking off the modal
  • clicking the close icon
  • clicking the button

None of these clicks close the modal. I saw another post where someone was having the same issue with jQueryUI and it needed corrections in the downloaded files.

Please advise.


  • allanallan Posts: 57,737Questions: 1Answers: 9,204 Site admin


    It appears to work okay here. Could you link to a page showing the issue so I can help debug it please?


  • tannerndtannernd Posts: 3Questions: 2Answers: 0

    Hi Allan, I currently have it in a dev environment on my local network. Here is an example code block that I use to initialize a datatable and editor.

    editorAddPmt = new $.fn.dataTable.Editor( {
            ajax: {'url':my_ajax_obj.ajax_url,
                type: "POST",
                data: {dp_action:'setAddPmt', table:'app_user_debt_add_pmt'},
            table: "#addlpayments",
            idSrc:  'income_id',
            template: '#addl_pmt_modal',
            fields: [ {
                    label: "Income ID:",
                    name: "income_id",
                    type: "hidden"
                    label: "Income Item:",
                    name: "item",
                    label: "Group:",
                    name: "group",
                    data: "group_id",
                    type: "select"
                    label: "Frequency:",
                    name: "frequency",
                    data: "frequency",
                    type: "select"
                }, {
                    label: "Planned Amount:",
                    name: "plan_amt",
                    attr: {
                        type: "number",
                        step: ".01"
                    label: "Power Payment Amt:",
                    name: "add_debt_pmt",
                    attr: {
                        type: "number",
                        step: ".01"
                    label: "Next Date:",
                    name: "next_date",
                    type: "datetime",
                    attr: {
                }, {
                    label: "User ID",
                    name: "userid",
                    type: "hidden",
                    def: php_vars.userid
        } );
        var tableAddPmt = $('#addlpayments').DataTable( {
            dom: "Bfrtip",
            ajax: {'url':my_ajax_obj.ajax_url,
                type: "POST",
                data: { action : 'get_datatables_addl_pmt'},
            paging: false,
            language: {
                "emptyTable": "Click New to add an Income."
            columns: [
                { data: "income_id" },
                { data: "item" },
                { data: "plan_amt", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
                { data: "add_debt_pmt", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) }
            columnDefs:[{ "visible": false, "targets": [0] }],
            select: true,
            paging: false,
            searching: false,
            ordering: false,
            buttons: [
                { extend: "create", 
                    text:'<div class="debt-icons"><i class="fa fa-plus-circle"></i></div>', 
                    editor: editorAddPmt,
                    formTitle:'Enter an Additional Payment',
                    formMessage:'Enter an additional payment that you can apply to your debt.',
                    formButtons:'Add Payment' },
                { extend: "edit", 
                    text:'<div class="debt-icons"><i class="fa fa-edit"></i></div>',     
                    editor: editorAddPmt,
                    formTitle:'Change an Additional Payment',
                    formMessage:'Change the additional payment information.',
                    formButtons:'Change Payment'  }
            "initComplete": function(settings, json) {
                setupDone = true;           
        } );
        .on( 'submitSuccess', function( e, json, data ) {
            tableAddPmt.ajax.reload( null, false );
            lowBalPayoff.ajax.reload( null, false );
            highIntPayoff.ajax.reload( null, false );
        } ).on( 'onInitEdit', function () {
        } ).on( 'onInitCreate', function () {
        } ).on( 'open', function ( e, mode, action ) {
        } ).on( 'preSubmit', function ( e, mode, action ) {
            var plannedAmt = this.field( 'plan_amt');
            var addDebtAmt = this.field( 'add_debt_pmt');
            var plannedAmtVal = parseFloat(plannedAmt.val());
            var addDebtAmtVal = parseFloat(addDebtAmt.val());
            if ( plannedAmtVal < addDebtAmtVal ) {            
                addDebtAmt.error( 'Value must be less than Planned Amount' );                           
            var item = this.field( 'item');
            if ( item.val() == '' ) {            
                item.error( 'Please enter an item name' );                           
            if ( this.inError() ) {
                return false;
        } );

    Please let me know what additional information I can provide.

  • allanallan Posts: 57,737Questions: 1Answers: 9,204 Site admin

    There is nothing similarly obvious there I'm afraid. I'd need to be able to debug the application I think.

    For example, does preSubmit trigger? Or is there a background element that has a higher z-index? Or there might be something else I've not thought of.


Sign In or Register to comment.