Can I show a modal from head_tag

dev
1

hi @david , is there any chance to show the Modal from a script on head_tag.html? Thank you

2

Technically you could with major amounts of hacks, but it is not recommended.

Instead you would extend using plugin api and then trigger the modal from that code, can you explain exactly what you are trying to do? Have you already worked around this issue?

1 Like
3

Hi Sam, I have a similar question.

For our site, we have only utilized the head_tag to customize it. Previously, we utilized magnific with jQuery and iframe to populate a modal with interactable list items from a separate domain, but we reasoned that Discourse has finally officially phased away from magnific/jQuery recently because clicking on the same links produces nothing (nothing in the console either).

So I’m looking for the next best option. Can you confirm that using DModal is the most appropriate option for my needs? Any assistance would be super helpful!

Here is some code we used to attach magnific popup triggers.

   if (window.jQuery) {
        const $document = $(document)
        $document.on('click', '.otpc-magnific-trigger', function() {
            var $button = $(this)
            if ($button.hasClass('initialized')) {
                $button.magnificPopup('open')
            } else {
                $button.magnificPopup({
            		type: 'inline',
            		preloader: false
            	})
                $button.magnificPopup('open')
                $button.addClass('initialized')
            }
            return false
        })
5

Hi Brandon,

In general we recommend avoiding using the ‘head tag’ for any complex customizations. Instead, you should look at getting set up with a proper git-based theme.

Once you have that, then yes DModal is the probably what you need. We have some documentation on that here:

1 Like
6

Hi David, thank you for the reply.

We do have a git-based custom theme where we primarily modify our javascript in the head_tag.html; sorry if that was not clear. We have been using script tags for any handlebar templates, but I see that is it recommended to utilize dedicated files for certain connector templates.

Can you confirm that magnific is no longer compatible with Discourse? I’m trying to determine the cause of the breaking of our popup functionality.

1 Like
9

I’m not aware of any change to magnificPopup, but we do plan to remove it soon so I would recommend moving to the documented DModal API.

One thing which has changed recently is the way we load JQuery. It now becomes available slightly later in the boot process. So, window.JQuery may not be available until after Discourse has booted.

You can make your script run after boot by switching <script> for a Discourse ‘plugin initializer’:

<script type="text/discourse-plugin" version="0.8">
1 Like