Show Bootstrap Modal Only If Url Has Certain Parameters

Is there a way using Bootstrap's modal functionality to evaluate the URL for parameters and open the modal automatically? For example: Visitors to the site with URL : example.com d

Solution 1:

Yes, of course this is possible by only running some JavaScript code if the query string (offer=1234) or URL (/offer1234) matched.

Insert this javascript code somewhere after the div where your modal is declared, typically best to add just before your ending </body> tag:

<scripttype="text/javascript">var url = window.location.href;
if(url.indexOf('?offer=1234') != -1 || url.IndexOf('/offer1234') != -1) {
    $('#myModal').modal('show');
}
</script>

You can tweak the if statement however you like, exclude only one statement either side of the double pipe symbols || (OR) if you only want to test one of those url patterns, and where myModal defines a div with your modal content to display (eg. <div id="myModal"></div>).

See the documentation for more options and guidelines. http://getbootstrap.com/javascript/#modals-options

Update I have also put together a working Plunker for you demonstrating: http://run.plnkr.co/yEBML6nxvxKDf0YC/?offer=1234

Solution 2:

You can check the URL if it has "offer" or not to hide/show the modal

var hasParam = window.location.href.indexOf('offer');

if(hasParam) {
   $('#aModal').show();
} else {
  $('#aModal').hide();
}

<div id="aModal"class="modal"> </div>