boostrap 模态框

Posted 2020-07-29 荣超

<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">Modal title</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

<a href="页面url" data-toggle="modal" data-target="#myModal">调用模态框</a>  并且把新页面内容加载到

div.modal-content  内并弹出模态框

加载的页面需要按modal-header modal-body modal-footer书写

比如

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
        <span aria-hidden="true">&times;</span>
    </button>
    <h3 class="modal-title" id="myModalLabel">测试</h3>
</div>

<div class="modal-body">
    <h3>测试</h3>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="submit" class="btn btn-primary">测试</button>
</div>

 

data-dismiss="modal" 控件加上该属性点击关闭模态框

 

下面是显示效果