zbb20171221 bootstrap 模态窗口

1、BootStrap 模态框禁用空白处点击关闭

模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处.....

$('#myModal').modal({backdrop: 'static', keyboard: false});

backdrop:static时,空白处不关闭.

keyboard:false时,esc键盘不关闭.

上述代码用以打开模态框

在最外层的盒子加个data-backdrop="static"就可以了

2、滚动条

<!-- 模态框（Modal）自选人工智能 -->
                                <div class="modal fade" id="T_BASIC_DATA_AI_MODEL"
                                    data-backdrop="static" tabindex="-1" role="dialog"
                                    aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" style=" 80%; height: 80%">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true">&times;</button>
                                                <h7 class="modal-title" id="myModalLabel">自选人工智能</h7>
                                            </div>

                                            <div class="modal-body">

　　　　　　　　　　　　　　//-----------------------------------------滚动条-滚动条-滚动条-滚动条-滚动条-滚动条
                                                <div class="row pre-scrollable">

                                                    <table class="table table-striped">
                                                        <thead>
                                                            <tr>
                                                                <th>序号</th>
                                                                <th>日期</th>
                                                                <th>代码</th>
                                                                <th>名称</th>
                                                                <th>涨幅</th>
                                                                <th>涨速</th>
                                                                <th>rxg</th>
                                                                <th>5逆</th>
                                                                <th>现手</th>
                                                                <th>总额</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr th:each="obj : ${aiList}">
                                                                <td th:text="${obj.id}">-</td>

                                                                <td
                                                                    th:text="${#dates.format(obj.contentADate, 'dd/MMM/yyyy')}">-</td>
                                                                <td th:text="${obj.contentB}">-</td>
                                                                <td th:text="${obj.contentC}">-</td>
                                                                <td th:text="${obj.contentD}">-</td>
                                                                <td th:text="${obj.contentE}">-</td>
                                                                <td th:text="${obj.contentF}">-</td>
                                                                <td th:text="${obj.contentG}">-</td>
                                                                <td th:text="${obj.contentH}">-</td>
                                                                <td th:text="${obj.contentI}">-</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>

                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary"
                                                    data-dismiss="modal">确定</button>
                                                <button type="button" class="btn btn-default"
                                                    data-dismiss="modal">关闭</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>