javascript - Bootstrap 模式用链接替换按钮 - 动态 Div ID

Question

使用 Bootstrap 在动态 php 循环中包含模态。通过从迭代中的每一行添加一个唯一字段来动态更改 div ID，效果非常好:

foreach($classes as $class => $details)
    {
     $unique = $class->['ID'];
     $name = $class->['Name';
     $description = $class->['Description';

    ?>
    <button class="btn btn-xs" data-toggle="modal" data-target="#myModal<?php echo $sclassid ?>">
<?php echo $name ?></button>
        <!-- Small modal -->
        <div id="myModal<?php echo $sclassid ?>" class='modal fade bs-example-modal-sm' tabindex='-1' role='dialog' aria-labelledby='mySmallModalLabel' aria-hidden='true'>
      <div class='modal-dialog modal-sm'>
        <div class='modal-content'>
                <?php echo $classDescription?>  
            <button type="button" class="btn btn-xs" data-dismiss="modal">Close</button>  
        </div>
      </div>
  </div>

如果您没有生成唯一 ID (#myModal-somevalue)，那么每次点击都会打开模态框的每个实例。哎哟。

无论如何 - 我可以将按钮样式设置为看起来像链接，但是有没有一种方法可以使用与此类似的链接将相同的信息发送到 Bootstrap jscript 代码:

<a href="javascript:void(0)" class="md-trigger" onclick="$('.bs-example-modal-sm').modal('show')"><?php echo $className ?>

添加data-target="#myModal<?php echo $sclassid ?>"没用。

是否有任何理由认为一种方式或另一种方式会更好。

我期待您的见解和反馈。

开始阅读 Marijn Haverbeke 的 Eloquent Javascript...

Answer 1

与其遍历模态本身，为什么不设置 -one- 模态，并使用 jQuery 的 ajax() 将另一个页面注入(inject)模态容器 - 无需唯一 ID tomfoolery。

这是我的做法(这是在 ColdFusion 中，所以 # 符号等同于 PHP 的变量标记)- 还要注意这是 Bootstrap 2.1.0，但一些结构/类更改将使其在 3.1 中工作。 1:

这是启动模态的 URL(这可以通过循环脚本输出，动态设置 url 参数以传递给包含模态内容的脚本):

<a href="/modal/showDocHistory_Modal.cfm?docPropID=#GetMetaData.docPropID#&File=#URLEncodedFormat(name)#" data-target="#histModal" data-toggle="modal" rel="tooltip" data-placement="left" title="Click to view document history" class="btn btn-mini ajax"><i class="icon icon-list-alt"></i></a>

接下来，您有模态的容器:

<!--- DIV container for history modal --->
<div class="modal hide fade" id="histModal" style="width:80%; margin-left:-40%;"></div>

最后，使用一些 jQuery 来确保传递给模态框的 URL 是唯一的(否则，上次点击的链接将始终在下次模态框启动时出现):

<!--- script to ensure ajax modal always loads currently clicked link --->
<script type="text/javascript">
$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    $('[data-toggle="modal"].ajax').click(function(e) {
      e.preventDefault();
      var url = $(this).attr('href');
      var target = $(this).data('target');
      if (url.indexOf('#') == 0) {
      $(target).modal('open');
      } else {
          $.get(url, function(data) {
                              $(target).html(data);
                              $(target).modal();
          }).success(function() { $('input:text:visible:first').focus(); });
      }
    });
});
</script>

现在，您需要做的就是遍历 HREF 并提供参数以提供给包含模态内容的外部脚本(外部脚本将只包含模态主体标签，因为主模态容器将位于调用脚本)。