Call a Modal with a url

Tips and Tricks
1

Hello all,

Just want to share with you something that I use in one of my last works, that I think it could be important or interesting.

Lets say you want to create a link (url) to open a modal, normally you create a modal, create a button and add the function to open modal and you select the modal you want to open.

But lets say you want to share with someone a URL that open automatically a modal but only if you use that url, not open a modal automatically when you open one page or after some time, only with a URL.

With this code you can, so lets see an example:

If you have a modal lets call it #mobile you can’t create a URL directly with:

But you can if you add the following code in the Footer of the page:

<script>
document.addEventListener("DOMContentLoaded", function() {
if(window.location.href.indexOf('#mobile') != -1) {
  $('#mobile').modal('show');
}
});
</script>

Just need to change #mobile with the modal ID you want to open.

So then if you share that URL that person will see the modal, it could be interesting for some discount, or some promotion, or for private information, well just my 2 cents, for some people that want to create links (urls) to open modals.

8 Likes
2

Thanks @Pealco,

Hope you dont mind, If people wanted a Bootstrap 5 version without jquery…

<script>
document.addEventListener("DOMContentLoaded", function() {
	if (window.location.href.indexOf("#modal") > -1) {
		var mobileModal = new bootstrap.Modal(document.getElementById('mobile'));
		mobileModal.show();
	}
});
</script>

If you use Parameters you can add lots of options too, and add dynamic content to your modal.

4 Likes
3

Hello @PeteSharp off course I don’t mind, and thank you for your code too….

I want to my clients change some information in modals but don’t know how to do it with volts, can @Jannis help me please?

1 Like
4

What exactly?

5

Just what I was needing and worked perfectly. Clarity for others like me who don’t code at all:

Replace indexOf(“#modal”) with what you want the url trigger to be so example: indexOf(“#video”)

and replace getElementById(‘mobile’)); with your modal id so example: getElementById(‘modal-id’));

Thanks again @PeteSharp

1 Like