bootstrap前端页面使用模态框（modal）弹出层

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m18870420619/article/details/82257328

1，添加js文件

<script type="text/javascript" src="/H-ui.admin/lib/jquery/1.9.1/jquery.min.js?version=0.001"></script> 
<script type="text/javascript"  src="/H-ui.admin/lib/bootstrap-modal/2.2.4/bootstrap.js"></script>

2，页面添加按钮和弹出层

<div>
     <button data-toggle="modal" data-target="#myModal" class="btn btn-success radius ml-50" type="button">弹出或隐藏</button>
</div>


<div class="modal fade" id="myModal" tabindex="-10000" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="padding-bottom: 0px;">
        <div class="modal-header" style=" border: none;">
                <div class="modal-title">选择片区</div>
            </div>
            <div class="modal-body">
                <ul id="areaTree" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-primary"type="button">确定</button>
            </div>
        </div>
    </div>
</div>

.modal-body { 
    height: 120px;
    overflow-y: scroll;
} 
.modal.fade.in {
    top: 30%;
}