在链接上打开不同的模式框

时间:2018-06-21 11:16:54

标签: html twitter-bootstrap

我已经完成工作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">&times;</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">&times;</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>

0 个答案:

没有答案