• 目录

模态框Modal

阅读量: 564 编辑

模态框Modal

一、Modal 介绍

  • 类似于操作系统上的模态框

  • 网页上也可以有模态框，主要用于简单信息的维护、信息提示等

  • Bootstrap提供了Modal插件，可以实现模态框

  • 每个模态框必须有一个id，如果一个页面有多个模态框，那么要定义不同的id

固定结构：

  • .modal、.modal-dialog

  • .modal-content、.modal-header、.modal-body、.modal-footer

二、代码实战

代码的详细解读，可以参考视频教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="./res/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./res/bootstrap.min.js"></script>

</head>
<body style="padding: 50px;">
    <h1>模态框：modal</h1>

    <button onclick="showModal()">显示模态框</button>

    <div id="myModal" class="modal" role="dialog" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">模态框标题</h4>
                </div>

                <div class="modal-body">
                    这是内容区，可以放任何的组件，比如form
                </div>

                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" onclick="hideModal()">提交数据</button>
                </div>

            </div>
        </div>
    </div>

    <script type="text/javascript">
        function showModal(){
            $('#myModal').modal();
        }
        function hideModal(){
            alert('自定义一些功能')
            $('#myModal').modal('hide');
        }
    </script>

</body>
</html>
  • 目录