bootstrap模态框

来源：互联网发布：ftp客户端软件下载编辑：程序博客网时间：2024/06/05 03:34
模态框

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">    <title>XXX</title>    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">    <link rel="stylesheet" href="css/main.css">    <!--[if lt IE 9]>    <script src="lib/html5shiv/html5shiv.min.js"></script>    <script src="lib/respond/respond.min.js"></script>  <![endif]--></head><body><!--默认隐藏--><!--模态框声明--><div class="modal">    <!--模态框窗口声明-->    <div class="modal-dialog">        <!--内容声明-->        <div class="modal-content">            aaaaa        </div>    </div></div><!--显示--><!--模态框声明--><!--<div class="modal show">    <!–模态框窗口声明–>    <div class="modal-dialog">        <!–内容声明–>        <div class="modal-content">            aaaaa        </div>    </div></div>--><!--显示,加上头，主体和底部--><!--模态框声明--><!--<div class="modal show">    <!–模态框窗口声明–>    <div class="modal-dialog">        <!–内容声明–>        <div class="modal-content">            <div class="modal-header">                头            </div>            <div class="modal-body">                主体            </div>            <div class="modal-footer">                底部            </div>        </div>    </div></div>--><!--不显示（点击按钮再显示）,加上头，主体和底部，加上其他内容--><!--模态框声明--><!--<div class="modal" id="myModal" tabindex="-1">--><!--加上tabindex后，点击ESC也能关闭模态框--><div class="modal fade" id="myModal" tabindex="-1"><!--加上fade后具有淡入淡出效果-->    <!--模态框窗口声明-->    <!--<div class="modal-dialog">-->    <div class="modal-dialog modal-lg"><!--可以调整大小-->        <!--内容声明-->        <div class="modal-content">            <div class="modal-header">                <!--关闭按钮-->                <button class="close" data-dismiss="modal"><!--可以关闭模态框-->                    <span>×</span>                </button>                <!--头部标题-->                <h4 class="modal-title">登录</h4>            </div>            <div class="modal-body">                <!--<p>暂时无法注册</p>-->                <div class="container-fluid"><!--在模态框主体部分还可以加入流体的栅格系统，一定是流体-->                    <div class="row">                        <div class="col-lg-4 col-md-4 col-sm-6">haha</div>                        <div class="col-lg-4 col-md-4 col-sm-6">hehe</div>                        <div class="col-lg-4 col-md-4 col-sm-6">heihei</div>                    </div>                </div>            </div>            <div class="modal-footer">                <button class="btn btn-default">注册</button>                <button class="btn btn-primary">登录</button>            </div>        </div>    </div></div><!--需要指定模态框的id--><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹出完整模态框</button><!--也可以使用方法a标签，data-target可以换成href--><a class="btn btn-primary" data-toggle="modal" href="#myModal">点击弹出完整模态框</a><!--data-backdrop默认是true，效果跟上面一样，如果是false,模态框背景无黑灰色，且点击空白处不会关闭模态框--><button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="false">    点击弹出完整模态框</button><!--data-backdrop默认是true，效果跟上面一样，如果是static,模态框背景有黑灰色，但是点击空白处不会关闭模态框--><button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static">    点击弹出完整模态框</button><!--data-keyboard默认是true，即按Esc可以关闭模态框，如果是false,就不能关闭--><button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-keyboard="false">    点击弹出完整模态框</button><!--href通过指定远程html文件即可远程加载内容到data-target="#myModal"模态框，远程中要加入header和footer--><button class="btn btn-primary" data-toggle="modal" data-target="#myModal" href="模态框远程.html">    远程加载弹出完整模态框</button><!----><button class="btn btn-primary" id="btn">    jQuery实现弹出完整模态框</button><script src="lib/jquery/jquery.js"></script><script src="lib/bootstrap/js/bootstrap.js"></script><script src="js/main.js"></script><script>    $('#btn').on('click', function () {        $('#myModal').modal('show');    });//    $('#myModal').modal({});如果不给参数，默认一打开浏览器就会弹出模态框    $('#myModal').modal({        show:false,         /*如果不给参数，默认一打开浏览器就会弹出模态框,所以一开始不让它显示*/        /*其他参数跟上面按钮中data-后面的一样*/        remote:'模态框远程.html' /*远程加载*/    });    $('#myModal').on('show.bs.modal', function () {        alert('当模态框出现之前，触发该事件');    });    $('#myModal').on('shown.bs.modal', function () {        alert('当模态框出现之后，触发该事件');    });    $('#myModal').on('hide.bs.modal', function () {        alert('当模态框关闭之前，触发该事件');    });    $('#myModal').on('hidden.bs.modal', function () {        alert('当模态框关闭之后，触发该事件');    });    $('#myModal').on('loaded.bs.modal', function () {        alert('从远端的数据源加载完数据之后触发该事件');/*远程加载不是点击之后加载，默认页面加载完成后就已经加载好了*/    });</script></body></html>
阅读全文
0 0