Hello,

I want to open specific URLs (of my site) in a modal window. I have tried to use this link for a test:

<a href="/user/login" type="button" class="btn btn-default btn-lg btn-more" data-dialog-type="modal">Test</a>

The Modal option is enabled in my subtheme. But when I click on the link I don't see any modal window and I'm redirected to the user page. The modal function isn't called.

Did I forget something?

Have you an example to implement a modal window in a link?

Thanks for your help.

Comments

kumkum29 created an issue. See original summary.

kumkum29’s picture

kumkum29 commented
Issue summary: View changes
kumkum29’s picture

kumkum29 commented
Issue summary: View changes
kumkum29’s picture

kumkum29 commented

If I use the default code of Bootstrap, the modal windows are visible on my site, e.g:

<button data-toggle="modal" data-target="#InscriptionModal"><i class="glyphicon glyphicon glyphicon-log-in"></i>Test</button>

<div class="modal fade" id="InscriptionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
....

Maybe, I don't understand the use of modals with the Bootstrap theme. But we don't have need to insert the code of the modal in our template with Bootstrap theme, isn't it ? And we put only a link/button in our code with the data-dialog-type attribute. No ?

Thanks.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Closed (works as designed)

Unfortunately, there doesn't seem to be a lot of "official" documentation on d.o about core's Dialog/Modal APIs.

However, a simple google search will likely lend you many articles you can use to figure out how to invoke a dialog/modal the proper way.

kumkum29’s picture

kumkum29 commented
Status: Closed (works as designed) » Active
markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Closed (works as designed)
kumkum29’s picture

kumkum29 commented
Status: Closed (works as designed) » Active

Hi Markcarver,

Before to create an issue I study posts/issues to find a solution to my problem. So, in my case, I don't see 1 plain explication to resolve my problem.

I use a subtheme with the Bootstrap framework. And inside several templates, I need to use a modal system to open specific URLs. As I use bootstrap I want to use the modal system of bootstrap. Also, in the bootstrap module we have the "bootstrap-modal.html.twig" template and it's useful for alter code depending of the URLs.

But, If I use 1 link (see code) to open an URL in a modal, 1 modal window is opened, but from the Drupal modal system.

<a class="use-ajax" data-toggle="modal" data-dialog-type="modal" href="/user/login">test</a>

How can I use the Bootstrap modal system in my differents links?

Thanks for this information to understand the mechanisms of the modal with 1 Bootstrap theme. After that I can close this issue.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Closed (works as designed)

I don't see 1 plain explication to resolve my problem

That is because there is no "one-size fits all solution" when it comes to dialogs/modals. It entirely depends on its use case and where it's initiated or created.

The base theme automatically bridges cores native dialog/modal APIs (that usually uses jQuery UI) to the Bootstrap modal.

You don't need to worry about actually creating the dialog/modal yourself. Just focus on utilizing core's existing dialog/modal APIs and make the necessary changes to render arrays/links.

I'd strongly recommend looking at existing core and other contrib examples on how they implement them.

In regards to the bootstrap_modal theme hook/template this base theme provides, that is really only for extremely simplistic and static use cases. A convenience for non-dynamic content that needs to be render cached.

kumkum29’s picture

kumkum29 commented

@markcarver

After debug, I can see that modal.js and jquery.ui.bridge.js are loaded when we use a link with modal.
The template "bootstrap-modal.html.twig" seems not to be called to render the modal. (modal with id="drupal-modal"). I get the same problem mentionned here: https://www.drupal.org/project/bootstrap/issues/2840517

aaronbauman’s picture

aaronbauman
he/him
commented

FYI kumkum29, here's the markup i'm using to generate the modal link:

    $element['#form_launcher'] = [
      '#type' => 'link',
      '#title' => t('Open modal form'),
      '#url' => $form_url,
      '#attributes' => [
        'class' => ['use-ajax'],
        'data-dialog-type' => 'modal',
      ],
    ];

It's working great, except for this issue: #2978392: Mapped option closeOnEscape doesn't work as expected

Some of the bootstrap theme modal settings are working, and some aren't.
At this point, i'm not even sure whether the code above generates a bootstrap modal or a jquery dialog.
But, I'm assuming it creates a bootstrap modal, since my patch in #2978392 fixes the jquery ui modal bridge to use the bootstrap theme modal setting, and it works.

Furthermore, there is no documentation on https://drupal-bootstrap.org/ that explains how it works.
It's very opaque to me exactly how bootstrap theme modal settings, core dialog UI, bootstrap framework, and the jquery ui modal bridge are supposed to work together.
And many of the google results linked above are actually about bootstrap modals, confusing things further.

markhalliwell’s picture

markhalliwell
Primary language English
commented

Some of the bootstrap theme modal settings are working, and some aren't.

Again, as I have already stated in that issue, that's intentional because it's bridging core's APIs, which may or may not translate 100% of the time to Bootstrap modal options.

Furthermore, there is no documentation on https://drupal-bootstrap.org/ that explains how it works.

That's because it's not this project's responsibility to document Core APIs. I have opened #2979724: Document Dialog/Modal APIs to address this though.

It's very opaque to me exactly how bootstrap theme modal settings, core dialog UI, bootstrap framework, and the jquery ui modal bridge are supposed to work together.

Which is why I re-titled the other issue so a note can be added to that section in the theme settings explaining that when using core's dialog/modal APIs, not all "default settings" set there will be used. They can and will be overridden by what the core/jQuery UI dialog APIs defaults are set to and any passed dialog options (from the code).

You don't have to use core's dialog/modal APIs. In fact, I have a couple projects that avoid using them on purpose and instead construct and handle the modals manually due to the complex nature. In these cases, the "default settings" set in the theme work 100% of the time because we're not trying to compete/translate core's or jQuery UI's dialog/modal APIs.

---

I'm not unsympathetic to your frustration. The symptoms you're experiencing, however, seem mostly due to the lack of JavaScript/library knowledge.

The APIs, while not documented via core's normal PHP DOXYGEN method so they show up on api.drupal.org, are well documented in the JavaScript itself. As are Bootstrap's modals.

There are a 100 things that can "go wrong" with dialogs/modals.

It takes patience and a game plan to figure out how to implement them properly for any site. There is no "one size fits all solution".

Just because you "want" dialogs/modals, doesn't mean you should actually use them... especially if you don't know what you're doing.