Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Link directly to an open modal window in Bootstrap
/* 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.
*/
@hugojuradogarcia
Copy link

hugojuradogarcia commented Nov 11, 2014

Thanks, this works

@miketif
Copy link

miketif commented Nov 10, 2015

Thank you for this.

@ercanertan
Copy link

ercanertan commented Nov 23, 2015

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

@MaartenW
Copy link

MaartenW commented Nov 26, 2015

@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

@obritoluis
Copy link

obritoluis commented Feb 7, 2016

You're the man!

@venturewise
Copy link

venturewise commented Feb 11, 2016

This is great, thanks!

@webhacking
Copy link

webhacking commented Feb 17, 2016

👍

@woppo
Copy link

woppo commented Jun 1, 2016

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

@hamedinia
Copy link

hamedinia commented Jun 8, 2016

Hi. Thank you

@mrky007
Copy link

mrky007 commented Jun 20, 2016

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

@iggymakesthings
Copy link

iggymakesthings commented Aug 29, 2016

thanks a lot

@awanzse
Copy link

awanzse commented Sep 13, 2016

thx bro. 👍

@fabioonet
Copy link

fabioonet commented Oct 24, 2016

Thanks

@deneshgautam
Copy link

deneshgautam commented Oct 26, 2016

where i see a demo??

@ravijoon
Copy link

ravijoon commented Apr 6, 2017

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

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

@MAPReiff
Copy link

MAPReiff commented Jun 19, 2017

Thanks :)

@conchoecia
Copy link

conchoecia commented Sep 19, 2017

Rad

@monogios
Copy link

monogios commented Sep 28, 2017

Thanks @ravijoon

@mjawaids
Copy link

mjawaids commented Dec 17, 2017

Awesome. This made my day.

@encompass
Copy link

encompass commented Jan 9, 2018

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.

@miguelangelmagdalena
Copy link

miguelangelmagdalena commented Feb 5, 2018

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)
    */
}

@nicoleherold
Copy link

nicoleherold commented Sep 16, 2018

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

@InnoM
Copy link

InnoM commented Mar 19, 2019

Thank you! you helped a lot

@bradley-varol
Copy link

bradley-varol commented Jun 19, 2019

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');
    }
});

@AFlorencia
Copy link

AFlorencia commented Jun 26, 2019

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

@callum09
Copy link

callum09 commented Jul 29, 2019

Thanks for this, great fix!

@banagale
Copy link

banagale commented Jan 18, 2020

Thanks Bradley-varol for this useful snippet.

@ajid2
Copy link

ajid2 commented Aug 6, 2020

thanks

@nmansuri191
Copy link

nmansuri191 commented Dec 21, 2020

thanks

@lepastiche
Copy link

lepastiche commented Jan 26, 2022

OMG! Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment