How do I theme a modal popup?

Question

How can I style Drupal 8 modal window to achieve Instagram style and behaviour?

I'm creating modal through extending ControllerBase class, thus have full control of content. However I can't figure it out how to control outer DIV with ui-dialog classes.

class CustomModalController extends ControllerBase {

  public function modal($nid) {

    $options = [
      'dialogClass' => 'popup-dialog-class',
      'width' => 'auto',
      'height' => 'auto',
    ];
    $response = new AjaxResponse();
    $response->addCommand(new OpenModalDialogCommand(t('Modal title'), $html, $options));

    return $response;
  }

}

Answer 1

Have you tried this?

On your custom module, add a file

custom_module.module

If you already have that file, edit it, and add this

  function custom_module_theme() {
  return array(
    'twig-template-name' => array (
      'variables' => array(
        'eg_var' => array()
      )
    )
  );
}

function custom_module_preprocess_page(&$variables) {
  $variables['#attached']['library'][] = 'custom_module/custom-lib';
}

Inside the "variables" add what you need (array, text etc), it is possible to add more than one, separated by comma.

If you need to add library, css or JS only for your module, add the last function.

If you added the last function, you need to match the "custom-lib" with your libraries file (inside your custom_module folder), like this

custom-lib:
  js:
    src/js/scripts.js: {}
  dependencies:
    - system/admin
    - core/jquery
    - core/drupal

Inside your custom_module folder, create a folder called "templates", inside that folder create a twig file, same name you have defined on function "module_theme" after the "return array"

twig-template-name.html.twig

Inside this file is where you will be able to add HTML and get the results from your controller.

Inside your controller file you should return values like this

$returnVal = array (
        '#theme' => 'twig-template-name',
        '#title' => 'Some title',
        '#eg_var' => $response,
    );

return $returnVal;

With this approach it is possible to theme a modal with its own css, js and libraries.

If for some reason you need to pass some values to JS (drupal settings) it is possible to, just add this block after "'#eg_var' => $response,"

'#attached' => array(
            'drupalSettings' => array('custom_module' => $response),
        ),

Inside the twig file, call the variable you have defined on .module file and you will be able to access all values you need.

{{ eg_var }}