Question

每次发布新帖子时，我都会使用循环创建新模块。使用id="modal-<? the_ID(); ?>"

分配ID

现在我希望人们能够通过已打开模块的外部链接访问该站点。如果我知道模态的ID，我可以做这个js，就像这样（以dreamsModal-23为例）：

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

由于这些模态是动态创建的，显然我在创建ID之前不知道它们。

有没有办法可以将任何ID附加到js，以便它可以带来任何价值和工作？基本上我在找这个：

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

一如既往，非常感谢任何帮助！

编辑---- 这是循环中模态标记的一个示例：

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

这是以上示例的触发器：

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

您可以简单地使用Modal插件默认的数据目标属性来进行模态弹出，因此您可以像这样更改代码：

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

这样你可以删除触发模态的脚本，因为它是不必要的，并在注释中更改我链接到你的脚本：

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

修改

由于导航也适用于href，因此您可以将href属性更改为数据目标

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

如何打开已动态创建模式的页面

1 个答案: