Eric Brockman Eric Brockman - 6 months ago 13
jQuery Question

How to open page with dynamically created modal already open

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();
});

Answer

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; ?>
Comments