Bootstrap 弹窗

导入css和js

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-modal.js"></script>

使用方法

1. 触发器 : 触发动作:data-toggle="modal" 触发目标:data-target="#mymodal" #mymodal 是id为mymodal的div

2. 弹窗: class="modal" id="mymodal" 然后包含class="modal-dialog" 再包含class="modal-content" . content内是 并列的 modal-content modal-body modal-footer.

3. 关闭弹窗:<button data-dismiss="modal">关闭</button>

示例

<!--触发器-->
<button class="btn-primary" data-toggle="modal" data-target="#mymodal">我是按钮,来点我</button>
<br><br><br><br>
<a data-toggle="modal" data-target="#mymodal">我是超链接,快点我</a>


<!--弹窗 start -->
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                我是头部
            </div>

            <div class="modal-body">
                我是身体
            </div>

            <div class="modal-footer">
                <button data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--弹窗 end -->

效果

点击之前

点击之后