Bootstrap为模态框添加滚动条

最新推荐文章于 2023-05-25 13:26:16 发布

王小希ww

最新推荐文章于 2023-05-25 13:26:16 发布

阅读量1.6k

点赞数

分类专栏： # bootstrap 文章标签： bootstrap html css

原文链接：https://www.yisu.com/zixun/122222.html

版权

Bootstrap 模态框滚动条 CSS样式前端开发

关键词由CSDN通过智能技术生成

bootstrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Bootstrap为模态框添加滚动条

转载至bootstrap模态框加滚动条的方法, 在html文件的<style>...</style>标签中加上如下代码即可：

<style type="text/css">
    .modal-dialog {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .modal-content {
        /*overflow-y: scroll; */
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    .modal-body {
        overflow-y: scroll;
        position: absolute;
        top: 55px;
        bottom: 65px;
        width: 100%;
    }

    .modal-header .close {margin-right: 15px;}

    .modal-footer {
        position: absolute;
        width: 100%;
        bottom: 0;
    }
</style>

<body>
   ...
         
    <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary mr5" style="margin-top:5px">
        Finish
    </button>
                      
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">数据预览</h4>
                </div>
                <div class="modal-body">
                    <table id="basicTable" class="table table-striped table-bordered responsive">
                        <thead class="">
                            <tr>
                                <th v-for="(head,index) in analysis_columns" v-text="head"></th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="(row,index_i) in analysis_values">
                                <td v-for="(column,index_j) in row" v-text="column"></td> 
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal">重置</button>
                    <button type="submit" class="btn btn-primary" v-on:click="submitForm()">提交</button>
                </div>
            </div>
        </div>
    </div>
</body>

王小希ww

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap为模态框添加滚动条

Bootstrap为模态框添加滚动条转载至bootstrap模态框加滚动条的方法<style type="text/css"> .modal-dialog { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .modal-content { /*overflow-y: scroll; */
复制链接

扫一扫

专栏目录