I have several modal windows created with Modal module on my site. None of them show up!

For example, if you go to the front page of my site (https://lejardindepoissy.org/), you should have one that appears.

If you inspect the HTML code of the page, you can find this:

<div id="js-modal-page-show-modal" class="modal fade js-modal-page-show" data-modal-options="{&quot;id&quot;:&quot;bourse_aux_paniers&quot;,&quot;auto_open&quot;:true,&quot;prevent_default&quot;:0,&quot;open_modal_on_element_click&quot;:&quot;&quot;}" data-keyboard="true" data-backdrop="true" aria-modal="true" aria-labelledby="bourse_aux_paniers_label" aria-describedby="bourse_aux_paniers_desc" role="dialog" tabindex="-1">
	<div class="modal-page-dialog modal-dialog modal-md" role="document">
		<div class="modal-page-content modal-content">
			<div class="modal-page-content modal-header  modal-no-border">
				<h4 id="bourse_aux_paniers_label" class="modal-title modal-page-title">
					Bourse aux paniers
				</h4>
				<div class="modal-header-right">
				</div>
			</div>
			<div id="bourse_aux_paniers_desc" class="modal-body modal-page-body">
				Des paniers sont disponibles dans la Bourse aux paniers. <a class="button-round" href="/amap/reserveBasket">J'y vais !</a> 
			</div>
			<div class="modal-footer modal-page-footer  modal-no-border">
				<label class="modal-dont-show-again-label">
				<input type="checkbox" class="modal-page-please-do-not-show-again" value="bourse_aux_paniers">
				Ne plus montrer ce message</label> 
				<input type="hidden" id="cookie_expiration" name="cookie_expiration" value="10000">
				<div class="modal-buttons">
					<button type="button" class="btn btn-default js-modal-page-ok-button " data-dismiss="modal">OK</button> 
				</div>
			</div>
			<input type="hidden" id="modal_id" name="modal_id" value="bourse_aux_paniers">
			<input type="hidden" id="delay_display" name="delay_display" value="0">
			<input type="hidden" id="show_once" name="show_once" value="">
			<input type="hidden" id="auto_hide" name="auto_hide" value="">
			<input type="hidden" id="auto_hide_delay" name="auto_hide_delay" value="5">
		</div>
	</div>
</div>

which means (I assume) the modal is well loaded in the page.
But it doesn't show up.
And I didn't find any error in the console.

The current version of Modal I use is 5.1.7 and since I updated to this version, I upgraded Drupal to version 11 (11.3.3 currently).

Any idea?

CommentFileSizeAuthor
#12 Screen Capture.png276.45 KBgbmapo
#10 modal_page.settings.yml327 bytesgbmapo
#10 modal_page.modal_.help_list_of_contracts_for_anonymous.yml2.23 KBgbmapo
#10 modal_page.modal_.bourse_aux_paniers.yml1.76 KBgbmapo

Comments

gbmapo created an issue. See original summary.

renatog’s picture

renatog commented

@gbmapo just as a test, could you try clear your cookies, please?

  1. Open browser dev tools (inspect element)
  2. Go to Application
  3. Go to "Cookies"
  4. Click on your site "https://www.example.com"
  5. Click with right click
  6. Clear
  7. It'll clear all cookies for this site
  8. Try again

Explanation

  • Your Modal is loaded from backend
  • Usually when I have this, can be related to cookies
  • The cookie "Don't show again" few times avoid Modal being displayed
  • So it can helps

If it didn't fix, please let me know and we can try a different approach

gbmapo’s picture

gbmapo commented

Thanks for the answer.
Unfortunately, it doesn't fix the problem.
I tried with two different browsers (Firefox and Safari) with the same result.

renatog’s picture

renatog commented

Maybe can be related to #3572172: Error on Modal 5.1 and D11 related to cookie

I saw your site
The Modal is really there
Is marked as "auto-open"
So should be displayed
The issue above is related to Modal 5.1 and D11
So can be related to this
I'm planning to merge that soon
Probably tomorrow
If you prefer, the patch is available at: https://git.drupalcode.org/project/modal_page/-/merge_requests/73.patch

Just to confirm, what was the version that was working? Modal 5.1 with D10? Or a different combination?

renatog’s picture

renatog commented

Just other questions

  1. What was the version of Drupal core and Modal that you were using when these Modals was working?
  2. After upgrade, did you run drush updb or applied the updates at /update.php?
  3. Did you run cache rebuild with drush cr ?
gbmapo’s picture

gbmapo commented

I'm pretty sure it worked with Drupal 10.6.2 and Modal 5.1.7.
Yes, I ran drush updb and cache was rebuilt with drush cr.

gbmapo’s picture

gbmapo commented

I tried to use the patch you mentioned in #4 but I'm not very familiar with that kind of stuff...
I understand it updates code in /web/modules/contrib/modal_page folder.

But once executed, I got this:

patching file composer.json
patching file modal_page.info.yml
1 out of 1 hunks failed--saving rejects to modal_page.info.yml.rej
patching file modal_page.libraries.yml

What about the failed hunk?

And assuming everything goes well, what am I supposed to do next to take into account these updates?

renatog’s picture

renatog commented

Just released a new version with the compatibility fix between Modal 5.1 and Drupal 11

https://www.drupal.org/project/modal_page/releases/5.1.8

@gbmapo could you do this, please?

  1. Update your Modal version to 5.1.8
  2. Run cache rebuild and try again
  3. If still not working, access: /admin/modules
  4. Verify if you have a module called js_cookie
  5. If you don't have, please install manually
  6. composer require 'drupal/js_cookie:^1.0'
  7. Enable that drush en js_cookie -y
  8. Clear caches drush cr

If you followed these steps, are on Modal 5.1.8 with js_cookie installed and still not working, could you export the YML of Modal configs and share with me please?

P.S. The YML has only the configurations without sensible information. If you want you can clear the "Modal Body". The idea is just to help you and other users that may have the same issue in the future

gbmapo’s picture

gbmapo commented

I have updated Modal to 5.1.8.
No improvement 😢

I have another example of modal not working you might check as well.
In this page, the modal is triggered by the 'Aide' button.

I attached the corresponding config files:
- modal_page.modal.bourse_aux_paniers.yml (in the front page)
- modal_page.modal.help_list_of_contracts_for_anonymous.yml (in the Contrats page)
- modal_page.settings.yml

gbmapo’s picture

gbmapo commented
StatusFileSize
new modal_page.modal_.bourse_aux_paniers.yml1.76 KB
new modal_page.modal_.help_list_of_contracts_for_anonymous.yml2.23 KB
new modal_page.settings.yml327 bytes

I forgot the files in my previous comment...

renatog’s picture

renatog commented

@gbmapo seems that you need to set BS5 on D11

Steps

  1. Access admin/config/user-interface/modal-page/settings
  2. On "Bootstrap" go to "Select a version" and select Bootstrap 5
  3. Save
  4. Clear caches
  5. Try again

Explanation

  1. There is a compatibility issue on D11 with BS3
  2. You're running on D11
  3. And on your settings is marked to use BS3

Please let me know if worked

gbmapo’s picture

gbmapo commented
StatusFileSize
new Screen Capture.png276.45 KB

It is weird!
With UI, it is Bootstarp 5 which is selected (see Screen Capture).
How is it possible to have bootstrap_version: 3x in modal_page.settings.yml?
By the way, there is only one possible value in the drop down list. Is it normal?

renatog’s picture

renatog commented

Could you re-save this form please?

Yes, on D11 the option 3X was removed (because don't works with D11)
So the default value appears as 5X
However, maybe in the database still 3X
For this reason the YML settings appears as 3X

So I recommend you:

  • 1) Open the form: admin/config/user-interface/modal-page/settings
  • 2) The 5X will appears there
  • 3) Save
  • 4) Clear caches

The step 3 will save that in the database
I think it should works

Let's try! If don't fix, please let me know

gbmapo’s picture

gbmapo commented

It works!
Thanks a lot.

renatog’s picture

renatog commented
Status: Active » Fixed

Awesome!

It's curious because the hook modal_page_update_500002 should have applied that automatically

Maybe when this hook has been applied the Drupal wasn't on 11 yet and for this reason didn't applye the update.

But it's okay, I'm happy that worked! And congrats on your website. It's super cool

Thank you so much @gbmapo

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

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