使用bootstrap在动态php循环中包含modal。通过在迭代中为每行添加一个唯一字段来动态更改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 ?>"无效。
有任何理由表明其中一种方式会更好吗?
我期待你的见解和反馈。
与其在模态本身上循环，为什么不设置-one- modal，并使用jQuery的ajax()将另一个页面注入到模态容器中——不需要唯一的ID。
我是这样做的(这是在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>
接下来，是modal的容器:
<!--- 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并提供参数以提供给包含您的模态内容的外部脚本(外部脚本将只具有模态主体标记，因为主模态容器将在调用脚本中)。