[英]Bootstrap modal Replace Button with Link - Dynamic Div IDs
使用引導程序將模式包含在動態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 ...
為什么不設置模態本身,而不是設置模態本身,為什么不設置-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>
接下來,您有模態的容器:
<!--- 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並提供參數以饋送至包含模態內容的外部腳本(外部腳本將僅具有模式主體標簽,因為主模式容器將位於調用腳本中)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.