Problem/Motivation

It seems that there is no option through HTML attribute to configure the Bootstrap settings such as backdrop, keyboard and focus. The additional options are particularly useful, especially when the modal content is a form. The keyboard option can prevent unintended closure of the modal unless the close button is clicked.

Proposed resolution

To add new settings for backdrop, keyboard and focus in data-dialog-options.

{% set
    defaultOptions = {
      autoOpen: 'true',
      dialogClasses: '',
      dialogShowHeader: 'true',
      dialogShowHeaderTitle: 'true',
      buttonClass: 'btn',
      buttonPrimaryClass: 'btn-primary',

      keyboard: 'true',
      focus: 'true',
      backdrop: 'static',
    }
%}
<a href="/" class="use-ajax" data-dialog-type="bootstrap4_modal" data-dialog-options="{{ defaultOptions|json_encode }}">Open in Bootstrap Modal</a>

Issue fork bootstrap4_modal-3404578

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

madelyncruz created an issue. See original summary.

madelyncruz’s picture

madelyncruz commented
Issue summary: View changes
madelyncruz’s picture

madelyncruz commented
Issue summary: View changes

madelyncruz opened merge request !9

madelyncruz’s picture

madelyncruz commented
Category: Feature request » Support request
Status: Active » Needs review
madelyncruz’s picture

madelyncruz commented
Issue summary: View changes

  • madelyncruz committed 6fdf20cb on 2.x 
    Issue #3404578: Backdrop, keyboard and focus settings support
vhin0210’s picture

vhin0210 commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

sneakysnk’s picture

sneakysnk commented
Version: 2.1.5 » 2.2.0
Category: Support request » Bug report

Sorry if I'm mistaken but it doesn't work.

      // Apply modal settings.
      settings.keyboard = settings.keyboard ? Boolean(settings.keyboard) : true;
      settings.focus = settings.focus ? Boolean(settings.focus) : true;
      settings.backdrop = settings.backdrop ?? true;

      // Cast the backdrop settings to boolean.
      if (settings.backdrop && (settings.backdrop === 'true' || settings.backdrop === 'false')) {
        settings.backdrop = Boolean(settings.backdrop);
      }

This code always returns true. No matter the value you send, a falsy value directly returns true due to the ternary condition. And if you try to send 'false' (string) to bypass this, Boolean('false') converts it to true anyway.

So it's impossible to set these values as false.