Launch Bootstrap Modal on Page Load, Contingent on Previous Page Button Click

Question

This is related to several questions re. invoking a Bootstrap modal, but it has a special circumstance, viz:

Page A has a button, which when clicked, loads Page B, AND invokes a modal on Page B.

Modal on Page B opens by two methods; from Page A button click, OR, Page B button click.

If a user navigates to Page B by any means OTHER THAN Page A button click, Page B modal remains hidden until Page B button click.

Is this clear?

Page B button click currently functions to open modal. Need to open Page B modal on Page A button click.

Suggested solutions appreciated.

mjb

Answer 1

You could pass a querystring parameter to Page B.

Page A

<a href="pageB?openModal=true">Go to Page B</a>

Page B

if (window.location.search.indexOf('openModal') != -1) {
  $("#modal").modal('show');
}

Answer 2

If you want to use a window location service to trigger a standard bootstrap modal independently from any link (internal or external), you can do it like this:

Standard Bootstrap Modal setup:

<div class="modal fade" id="dynaModal">Content</div>

Inside jQuery on ready or on load (be sure the page has loaded or get error):

if(window.location.hash) {
  var hash = window.location.hash;
  $(hash).modal('toggle');
}

1. First line checks to see if the url contains a hash
2. Second line sets the hash variable to the hash found in the url
3. Third line toggles a modal whose id matches the found hash

Example Link for #dynaModal:

<a href="pageB.html#dynaModal">Open Page B Modal</a>

If the hash doesn't match a modal's ID, the code doesn't run. If the code finds a hash in the url that matches a modal's ID, the code runs.