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.
*/

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