Bootstrap 模态框

发布时间：2020-12-17 21:19:52 所属栏目：安全来源：网络整理

导读：! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title 模态框 / title !-- modal框下会话窗口结构. modal-dialog-content-(header+body+footer) modal弹窗下的--会话类别. 内容三部分. footer取消键通常绑定事件,data-dismiss="modal" 可以通过

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <!-- 
        modal框下会话窗口结构.
        modal-dialog-content-(header+body+footer)
        modal弹窗下的--会话类别. 内容三部分.
        
        footer取消键通常绑定事件,data-dismiss="modal"

        可以通过modal-lg-md-sm来设置modal窗口大小,用于设置dialog弹窗大小.
        (没有xs最小号)
     -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="row">
            <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal01">Pop</button>

            <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal02">Pop2</button>

            <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal03">Pop3</button>

            <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal04">Pop4</button>
        </div>
    </div>
    
    <div class="modal  fade" id="modal01">
        <!-- 直接增加fade式样,完成淡入淡出. -->
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    提示弹窗
                </div>
                <div class="modal-body">
                    <p>弹窗内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                    <!-- data-dismiss(数据取消)= ‘类型‘ -->
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal02">
        <!-- 直接增加fade式样,完成淡入淡出. -->
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    提示弹窗
                </div>
                <div class="modal-body">
                    <p>弹窗内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                    <!-- data-dismiss(数据取消)= ‘类型‘ -->
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal03">
        <!-- 直接增加fade式样,完成淡入淡出. -->
        <div class="modal-dialog modal-sm ">
            <div class="modal-content">
                <div class="modal-header">
                    提示弹窗
                </div>
                <div class="modal-body">
                    <p>弹窗内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                    <!-- data-dismiss(数据取消)= ‘类型‘ -->
                </div>
            </div>
        </div>
    </div>
    <div class="modal madol-xs fade" id="modal04">
        <!-- 直接增加fade式样,完成淡入淡出. -->
        <div class="modal-dialog modal-sm ">
            <div class="modal-content">
                <div class="modal-header">
                    提示弹窗
                </div>
                <div class="modal-body">
                    <p>弹窗内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                    <!-- data-dismiss(数据取消)= ‘类型‘ -->
                </div>
            </div>
        </div>
    </div>

</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!