Link directly to an open modal window in Bootstrap

gistfile1.js

/* If you've ever had the need to link directly to an open modal window with Bootstrap, here's a quick and easy way to do it:

Make sure your modal has an id:

<div class="modal" id="myModal" ... >

Then stick this bit of Javascript at at the end of your document:
 */

$(document).ready(function() {

  if(window.location.href.indexOf('#myModal') != -1) {
    $('#myModal').modal('show');
  }

});

/*
Then you can send people to http://www.website.com/page.html#myModal and it'll load the page with the modal open.
*/

Thank you for this.

What about if you need to send parameters ? http://www.website.com/page.html#myModal?id=123

@ercanertan, send parameters where? You are now sending parameters to the client side. If you need to send the parameters to the server side you would need to place the parameters before the anchor, like:
http://www.website.com/page.html?id=123#myModal

This is great, thanks!

👍

Hello, thanks for the code.

i have a newbie questione for you:
how do i make it work in wordpress? where do i have to put this code?

thanks a lot

Hi. Thank you

I owe you a beer for this one. Saved me a lot of time. Thanks !!!

thanks a lot

thx bro. 👍

Thanks

where i see a demo??

Read it somewhere, we do like this... see if it helps

if (window.location.hash && $(window.location.hash).length) {
  $(window.location.hash).modal('show');
}

Thanks :)

Rad

Thanks @ravijoon

Awesome. This made my day.

First off thank you, it is what I am actually wanting to do. However, I can only get the modal to show when it is a refresh, if it is a freshly typed link it doesn't seem to work. This is Bootstrap 3.3x with Firefox.

Thx.
In case you have more modals, I'm using something like this:

$(document).ready(function(){

	//Open modal con url
	var url      	= window.location.href;
	var modal_code 	= getParameterByName("modal",url);

	if(window.location.href.indexOf('?modal='+modal_code) != -1) {
    	$('#myModal'+modal_code).modal('show');
    	/*Like a query string
		http://www.website.com/page.html?modal=1
		http://www.website.com/page.html?modal=2
		...
    	*/
  	}
	
}); 

function getParameterByName(name, url) { //Obtiene un value de un query string
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));

    /*EJEMPLO
	// query string: ?foo=lorem&bar=&baz
	var foo = getParameterByName('foo'); // "lorem"
	var bar = getParameterByName('bar'); // "" (present with empty value)
	var baz = getParameterByName('baz'); // "" (present with no value)
	var qux = getParameterByName('qux'); // null (absent)
    */
}

Thank you. I was looking the hole day for that.

Thank you! you helped a lot

This will work for all modals on your site. Just add the modal name to the url hash (https://example.com?page=1#myModal):

jQuery

$(document).ready(function () {
    $('.modal').each(function () {
        const modalId = `#${$(this).attr('id')}`;
        if (window.location.href.indexOf(modalId) !== -1) {
            $(modalId).modal('show');
        }
    });
});

ES6

const modals = [...document.getElementsByClassName('modal')];
modals.forEach((modal) => {
    const modalId = `#${modal.id}`;
    if (window.location.href.indexOf(modalId) !== -1) {
        $(modalId).modal('show');
    }
});

Thank you very much!!! You saved my head today!

Thanks for this, great fix!

Thanks Bradley-varol for this useful snippet.

thanks

thanks

OMG! Thanks a lot!

In 2022 you can do:
if (window.location.hash == '#myModal')

Thats cool bro , thanks