Bootstrap Modal Not Showing On Mobile

Question

I have a Bootstrap modal that loads perfectly fine for desktop users (Firefox, Safari, Chrome). We use Wordpress and it is loaded in footer.php before being invoked by a URL hitting '?status=join'. A partial of the modal code is below:

   <?php if (!is_user_logged_in()) {
     $social = do_shortcode('[wordpress_social_login]'); ?>
        <div class="modal fade" id="join-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

The JS that shows the join modal is below:

$(document).ready(function() {
 if (window.location.href.includes("?status=join")) {
     $('#join-modal').modal('show');
 }
});

I have tried different combinations of removing 'fade' from the class and adding 'href="#"' according to Bootstrap modal doesn't work on iPhone but with no success.

I have also tried emulating iOS in Safari but the modal still shows.

Would anyone have any experience with this sort of issue and/or could provide some troubleshooting advice? Thanks!