How to open page with dynamically created modal already open

Question

I'm using the loop to create a new module every time a new post is published. The ID is assigned using id="modal-<? the_ID(); ?>"

Now I want people to be able to visit the site from an external link with a module already open. I can do this js if I know the ID of the modal, like so (using dreamsModal-23 as an example):

var target = document.location.hash.replace("#", "");
if (target.length) {
  if(target=="dreamsModal-23"){
    $("#dreamsModal-23").modal('show');
  }
}else{    
}

Since these modal's are dynamically created though, obviously I don't know the IDs before they're created.

Is there a way I can I can append any ID to the js so that it will take any value and work? Basically I'm looking for this:

var target = document.location.hash.replace("#", "");
if (target.length) {
  if(target=="dreamsModal-ANYTHING"){
    $("#dreamsModal-WHATEVER-ID-IS-APPENDED-ABOVE").modal('show');
  }
}else{    
}

As always, any help is greatly appreciated!

EDIT ---- Here's an example of the modal markup in the loop:

<div class="modal fade" id="dreamsModal-<? the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="dreamsModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="dreamsModalLabel">Manifested Dream #<? the_ID(); ?></h4>
      </div>
      <div class="modal-body">
    <p><?php echo substr(the_title('', '', FALSE), 0, 140); ?></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-main" data-dismiss="modal">Close</button>
    <?php $next_post = get_next_post();
    if (!empty( $next_post )): ?>
        <a href="#dreamsModal-<?php echo $next_post->ID; ?>" class="btn-main" data-dismiss="modal"  data-toggle="modal"><</a>
    <?php endif;

    $prev_post = get_previous_post();
    if (!empty( $prev_post )): ?>
        <a href="#dreamsModal-<?php echo $prev_post->ID; ?>" class="btn-main" data-dismiss="modal"  data-toggle="modal">></a>
    <?php endif; ?>
      </div>
    </div>
  </div>
</div>

And here's the trigger for above example:

<a data-id="<?php the_ID(); ?>" data-toggle="modal" class="clickme">
    <article id="post-<?php the_ID(); ?>">
        <div class="content">
            <p class="post-title"><?php echo substr(the_title('', '', FALSE), 0, 140); ?></p>
        </div> <!-- .content -->
    </article> <!-- .article -->
</a>

js for trigger:

$(".clickme").on ("click", function(){ 
    $("#dreamsModal-" + $(this).attr('data-id')).modal();
});

I already answered a similar question here http://stackoverflow.com/questions/34154370/bootstrap-3-x-how-to-have-url-change-upon-clicking-modal-trigger/34242955#34242955 — David Ortega, May 31 '16 at 20:23
That's everything I need, thanks! If you can put that in Answer form, I can accept it, if you'd like. — Eric Brockman, May 31 '16 at 20:27
Though for some reason, when I open a modal, the url isn't changing. Instead it appends: `#undefined`, the external link solution works great though. — Eric Brockman, May 31 '16 at 20:33
Could you edit your question and include the HTML of one of the modals? Maybe you aren't using the data-toggle atribute on the anchor, thats why it says undefined as it works using that attrb, but isn't the only of working it out. — David Ortega, May 31 '16 at 20:39
I added an example to the question Forcefield, thanks for your time! — Eric Brockman, May 31 '16 at 20:49
My bad, I forgot to ask for the anchor that show the modal, or do you make it show using JavaScript? — David Ortega, May 31 '16 at 20:51
It should be noted that the url changes correctly if I use the navigation inside the modal - to switch to a previous or next post, but not if I initiate it from the posts page. — Eric Brockman, May 31 '16 at 20:51

David Ortega · Accepted Answer · 2016-05-31T21:26:23.910

You could simply use the data-target attribute that comes for default with the Modal Plugin to make modal popup, so you could change your code like this:

<a data-target="#dreamsModal-<?php the_ID(); ?>" data-toggle="modal" >
    <article id="post-<?php the_ID(); ?>">
        <div class="content">
            <p class="post-title"><?php echo substr(the_title('', '', FALSE), 0, 140); ?></p>
        </div> <!-- .content -->
    </article> <!-- .article -->
</a>

This way you could remove your the script that triggers the modal, because it would be unnecesary, and change the script I linked to you in the comment to this:

$(document).ready(function(){
   $(window.location.hash).modal('show');
   $('a[data-toggle="modal"]').click(function(){
      window.location.hash = $(this).attr('data-target');
   });
});

EDIT

As navigation also worked on href, then you can change the href atribute to data-target as well

<?php $next_post = get_next_post();
    if (!empty( $next_post )): ?>
        <a data-target="#dreamsModal-<?php echo $next_post->ID; ?>" class="btn-main" data-dismiss="modal"  data-toggle="modal"><</a>
    <?php endif;

    $prev_post = get_previous_post();
    if (!empty( $prev_post )): ?>
        <a data-target="#dreamsModal-<?php echo $prev_post->ID; ?>" class="btn-main" data-dismiss="modal"  data-toggle="modal">></a>
    <?php endif; ?>

Thanks Forcefield, this works great with the exception of one issue. Now when I use the navigation in the modals to switch from current post to next / previous, the url changes to #undefined. — Eric Brockman, May 31 '16 at 21:23

How to open page with dynamically created modal already open

1 Answers1