Change Width of Modal

Hi glennnz,

You can use the modal classes for predefined size of module as per requirements, these are some of them.
.modal-sm, .modal-lg, .modal-xl.

if you want to fully responsive, then you need to use media queries in CSS file.

@viren18febS

Like this?

<a class="use-ajax" data-dialog-type="modal-xl" href="..........

This doesn't work, the link doesn't open, no modal window appears.

Thanks,
Glenn

@glennnz

You can use this. This is the working example and you can change it as per your requirement..

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large popup</button>

Or You can define the size of modal as follows.

Node 3

#9 works with a small typo correction, add quotes, thus:

<a href=”/node/3” data-dialog-type=”modal” class=”use-ajax” data-dialog-option="{&quot;width&quot;:800, &quot;height&quot;:500}">Node 3</a>

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

This wasn't working for me as the attribute should be "data-dialog-options" instead of "data-dialog-option".

Thus, the correct example being:
<a href=”/node/3” data-dialog-type=”modal” class=”use-ajax” data-dialog-options="{&quot;width&quot;:800, &quot;height&quot;:500}">Node 3</a>

As form element:

$form['somelink'] = [
  '#type' => 'link',
  '#title' => 'Some link',
  '#url' => $url,
  '#attributes' => [
    'class' => [
      'use-ajax',
    ],
    'data-dialog-type' => 'modal',
    'data-dialog-options' => Json::encode([
      'width' => 800,
      'height' => 500,
    ]),
  ],
];