模态框

来源：互联网发布：程序员大学选课编辑：程序博客网时间：2024/06/08 13:13

模态框（Modal）是覆盖在父窗体上的子窗体。说的白一点就是你这当前页面不动，再在当前页面覆盖一个小一点（一般是小一点大小随自己调）的窗体，可以做一些操作（例如：登录、注册等）

做模态框很简单你找一个Bootstrap插件一拉，然后网上百度一段模态框代码一复制粘贴然后改改，改成自己要的样式就行。

如果大家想好好学学而我这又讲的不全大家可以上菜鸟网站去看看出来模态框还有很多东西。。。。。

这是一个登录的模态框大家可以看看。

<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title>Index</title>    <link href="~/CSS/bootstrap.min.css" rel="stylesheet" />    <script src="~/JS/jquery.min.js"></script>    <script src="~/JS/bootstrap.min.js"></script></head><body>    <h2>创建模态框（Modal）</h2>    <!-- 按钮触发模态框 -->    <button class="btn btn-primary btn-lg" data-toggle="modal"            data-target="#myModal">        开始演示模态框    </button>    <!-- 模态框（Modal） -->    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"         aria-labelledby="myModalLabel" aria-hidden="true">        <div class="modal-dialog">            <div class="modal-content">            <table>                <tr>                    <td>用户名：</td>                    <td><input type="text" /></td>                </tr>                <tr>                    <td>密  码：</td>                    <td><input type="text" /></td>                </tr>                <tr>                    <td><input type="submit" /></td>                </tr>            </table>            </div><!-- /.modal-content -->        </div><!-- /.modal -->    </div></body></html>

0 0