Button for modal

Hi @uwejacobs

Yes you should be able to add a button then add the modals ID as the href. Using your example you would add an All Bootstrap Blocks button block then click the link icon, then enter #social-media-feedback. You can see an example on the image here https://areoi.io/wp-content/uploads/2022/06/modal-button.png.

If you have chosen to use your own implementation of the Bootstrap JavaScript instead of using the plugins built in one, you may need to add the following code to your JS.

var modals = document.getElementsByClassName("modal");
var modal_links = [];
for (var i = 0; i < modals.length; i++) {
	var modal = modals.item(i);
	var links = document.querySelectorAll("[href=\'#" + modal.id + "\']");
	if ( !links.length ) {
		continue;
	}
	for (var modal_i = 0; modal_i < links.length; modal_i++) {
		modal_links.push( links.item(modal_i) );
	}
}
if ( modal_links.length ) {
	modal_links.forEach( function( link ) {
		link.addEventListener("click", function(event) {
			event.preventDefault();
			var id = link.href.split("#");
			var modal = new bootstrap.Modal(document.getElementById(id[1]), {
				keyboard: false
			});
			modal.show();
		}, false );
	});
}

Or you may want to include the following js file in your theme /plugins/all-bootstrap-blocks/assets/js/bootstrap-extra.js which should give you the additional functionality the plugin adds without needing to include all of the plugins default js.

I hope this helps, but let me know if you still have issues and I can take another look.

Thanks

Miles

Hi @uwejacobs

No problem, I’m glad I could help.

Yes, I can definitely add in the latest version of Bootstrap. It’s a big job so may take a while to get it sorted but I will drop you an update over the next couple of months once it’s done.

If you need any more assistance in the meantime don’t hesitate to get back in touch.

Thanks

Miles