Skip to content

Instantly share code, notes, and snippets.

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) {
Then you can send people to and it'll load the page with the modal open.
Copy link

hugojuradogarcia commented Nov 11, 2014

Thanks, this works

Copy link

miketif commented Nov 10, 2015

Thank you for this.

Copy link

ercanertan commented Nov 23, 2015

What about if you need to send parameters ?

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:

Copy link

obritoluis commented Feb 7, 2016

You're the man!

Copy link

venturewise commented Feb 11, 2016

This is great, thanks!

Copy link

webhacking commented Feb 17, 2016


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

Copy link

hamedinia commented Jun 8, 2016

Hi. Thank you

Copy link

mrky007 commented Jun 20, 2016

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

Copy link

iggymakesthings commented Aug 29, 2016

thanks a lot

Copy link

awanzse commented Sep 13, 2016

thx bro. 👍

Copy link

fabioonet commented Oct 24, 2016


Copy link

deneshgautam commented Oct 26, 2016

where i see a demo??

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) {

Copy link

MAPReiff commented Jun 19, 2017

Thanks :)

Copy link

conchoecia commented Sep 19, 2017


Copy link

monogios commented Sep 28, 2017

Thanks @ravijoon

Copy link

mjawaids commented Dec 17, 2017

Awesome. This made my day.

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.

Copy link

miguelangelmagdalena commented Feb 5, 2018

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


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

	if(window.location.href.indexOf('?modal='+modal_code) != -1) {
    	/*Like a query string

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, " "));

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

Copy link

nicoleherold commented Sep 16, 2018

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

Copy link

InnoM commented Mar 19, 2019

Thank you! you helped a lot

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 (


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


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

Copy link

AFlorencia commented Jun 26, 2019

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

Copy link

callum09 commented Jul 29, 2019

Thanks for this, great fix!

Copy link

banagale commented Jan 18, 2020

Thanks Bradley-varol for this useful snippet.

Copy link

ajid2 commented Aug 6, 2020


Copy link

nmansuri191 commented Dec 21, 2020


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