Bootstrap 5.3 modal issues

Resolved Alex Diller
(@thedelta)

2 years, 3 months ago
Hi, first of all thanks for this great plugin.

I had some issues with the modal block and bootstrap 5.3, I assume 5.x is still in beta and not everything is implemented / documented yet with Plugin Version 1.3.13.

Apparently the modal won’t show with the anchor / href method.

This is just a heads up for the developers or user who want to use it and struggle to get it working 😀

My workaround solution is some JavaScript, which adds the necessary attributes to all trigger elements. Simply follow the modal tutorial but ensure your link starts with “#modal” and the anchor obviously with “modal”
```
const triggers = document.querySelectorAll('button[href],a[href]');
for (const trigger of triggers) {
	const href = trigger.getAttribute('href');
	if (!href.startsWith('#modal')) {
		continue;
	}

	trigger.setAttribute('data-bs-toggle', 'modal');
	trigger.setAttribute('data-bs-target', href);
}
```
- https://allbootstrapblocks.com/all-bootstrap-blocks/documentation/components/modal/
- https://getbootstrap.com/docs/5.3/components/modal

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author all_bootstrap_blocks
(@areoimiles)

2 years, 2 months ago

Hi Alex,

Thank you for this!

I would just like to check, have you disabled the Bootstrap JS included within the plugin in favour of using your own?

When using the built in Bootstrap JS, an additional JS file gets added which does what you have outlined above, so if you are using your own version of Bootstrap JS then you will need to manually add the code you suggested to get it working.

If you are using the built in JS and still having this issue please let me know as it should work so I will need to do some debugging.

Thank you for highlighting this requirement for other users, much appreciated!

Thanks
Miles

Thread Starter Alex Diller
(@thedelta)

2 years, 1 month ago

Oh that makes perfect sense, then I think thats the key issue here.

But maybe for the future there could be a bootstrap version check in php and then the correct HTML code is already returned by the plugin.

For best outcome I only include bootstrap css/js of components I actually use and try to include little to no additional plugin css/js.

Plugin Author all_bootstrap_blocks
(@areoimiles)

2 years, 1 month ago

Hi Alex,

Thank you for the response. I will have a look into the below as part of the next update.

“But maybe for the future there could be a bootstrap version check in php and then the correct HTML code is already returned by the plugin.”

Thanks

Miles

Plugin Author all_bootstrap_blocks
(@areoimiles)

2 years, 1 month ago

Hi Alex,

Just wanted to let you know a new version of the plugin is now available. I wasn’t able to apply the data tags to buttons automatically as the solution would have a negative impact on site performance.

However, I have added an additional toggle option to the button block under ‘Settings’ named ‘Link to Modal’, if checked the relevant data tags will be added to the button so you won’t need the additional JS. This option is only available if you have the ‘Include Bootstrap JS’ unchecked.

Hope this helps.

Thanks
Miles

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Bootstrap 5.3 modal issues’ is closed to new replies.