So öffnen Sie die Seite mit dynamisch erstelltem Modal bereits geöffnet

Question

Ich verwende die Schleife, um jedes Mal, wenn ein neuer Beitrag veröffentlicht wird, ein neues Modul zu erstellen. Die ID wird mit id="modal-<? the_ID(); ?>"

zugewiesen Jetzt möchte ich, dass die Leute die Website von einem externen Link mit einem bereits geöffneten Modul besuchen können. Ich kann dies tun js wenn ich die ID des modalen wissen, wie so (mit dreamsModal-23 als Beispiel):

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

Da diese modal ist dynamisch, obwohl geschaffen, natürlich weiß ich nicht, die IDs vor Sie sind erstellt.

Gibt es eine Möglichkeit, ich kann eine ID an die js anhängen, so dass es jeden Wert und Arbeit nehmen kann? Grundsätzlich suche ich nach diesem:

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

Wie immer wird jede Hilfe sehr geschätzt!

EDIT ---- Hier ist ein Beispiel für die modale Markup in der Schleife:

<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> 

Und hier ist der Auslöser für obiges Beispiel:

<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 für Trigger:

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

Answer 1

Sie könnten einfach das Data-Target-Attribut verwenden, das standardmäßig mit dem Moda geliefert wird l Plugin zu modalen Popup zu machen, so könnten Sie Ihren Code wie folgt ändern:

<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> 

So können Sie Ihre das Skript entfernen könnte, die die modale auslöst, weil es unnötigen sein würde, und ändern Sie das Skript, das ich mit Ihnen in Verbindung im Kommentar dazu:

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

EDIT

als Navigation auch auf href gearbeitet, dann können Sie die href atribute Daten-Ziel ändern sowie

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