我已经完成工作example on jsfiddle here。我面临两个问题。
1:在我的示例中,我在面板中建立了2个链接。模态框代码会在面板框内填满这么多吗?我需要在模式框中大约20个链接,这将导致大约1200行。那会很多吗?
2 :每个链接应打开一个不同的模式框,因此我可以更改文本以匹配该链接。那怎么可能?我必须在modal class
上设定一个想法,还是完全错误?
最好的问候
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">GENERAL</h3>
</div>
<div class="panel-body">
<a href="#" data-toggle="modal" data-target="#myModal">Cookie Policy</a><br/>
<!-- Cookie Policy Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is the text in the Cookie Policy modalbox</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#myModal">Opening hours</a><br/>
<!-- Cookie Policy Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is the text in the Opening modalbox</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>