0

I'm trying to display a modal dialog containing some simple markup on page load. I'm getting the expected markup to load, and the dialog appears. However, the dialog title always displays "Loading..." and the options (width, specifically) don't appear to work.

I've got the following in my controller:

public function modal() {
  $config = \Drupal::config('popup.settings');
  $title = $this->t('Fnord');
  $content = [
    '#type' => 'processed_text',
    '#text' => $config->get('content')['value'],
    '#format' => $config->get('content')['format'],
  ];
  $options = [
    'dialogClass' => 'popup-dialog-class',
    'width' => '75%',
  ];
  $response = new AjaxResponse();
  $response->addCommand(new OpenModalDialogCommand($title, $content, $options));

  return $response;
}

...and the following javascript:

(function ($, Drupal, drupalSettings) {
  $(document).ready(function () {
    var ajaxSettings = {
      url: '/popup/modal'
    };
    var myAjaxObject = Drupal.ajax(ajaxSettings);
    myAjaxObject.execute();
  });
})(jQuery, Drupal, drupalSettings);

The result:

Dialog box displays expected text, but "Loading" in place of title, and width option is ignored.

The width should be about 1152px on my screen, but is instead an even 600px; I assume that's a default, and that my $options array isn't overriding it as I would expect.

On the theory that this is only expected to work if the dialog is opened by a click event, I tried setting the dialog options in the javascript:

var ajaxSettings = {
  url: '/popup/modal',
  dialogType: 'modal',
  dialog: { width: 300 }
};

...however, the result was identical. What am I doing wrong?

  • Check with the default Bartik theme, perhaps your theme is overriding it via css. – No Sssweat Jan 7 at 3:20
  • 1
    You're right, that explains the width issue. Thank you! Now I just need to figure out why the modal title is being ignored, and displaying only "Loading..." – WRD Jan 7 at 14:42
2

It turns out the code above was working fine -- the problem was that the site was using a Bootstrap subtheme, and Bootstrap was configured to override the standard dialog behavior. Turning off Bootstrap's dialogs solved the problem, enabling both width and title settings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.