当前位置：首页> 正文

Bootstrap的js插件之模态框|modal

.modal——指明div元素包裹模态框；

.fade——给模态框添加淡入淡出效果；

.modal-dialog——包裹模态框的所有内容；

.modal-sm、.modal-lg——改变模态框的尺寸，以适配不同屏幕的分辨率；

.modal-content——承载模态框的内容部分；

.modal-header——模态框的头部；

.modal-body——模态框的主体部分；

.modal-footer——模态框的脚部；

更多细节请参考示例：

<!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">    <title>饭盒儿——发现身边不一样的世界</title>    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">    <script src="js/jquery-2.1.3.min.js"></script>    <script src="js/bootstrap.min.js"></script>    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]-->    <style>        .download-btn{            margin-top:1em;        }    </style></head><body><div >    <hr/>    <button type="button"  data-toggle="modal" data-target="#myModal">        饭盒儿App下载    </button>    <hr/>    <button type="button"  data-toggle="modal" data-target="#myModal2" data-whatever="@jason">        点击注册    </button></div><!--start modal1--><div   role="dialog" aria-label="myModalLabel" aria-hidden="true">    <div >        <div >            <div >                <button type="button"  data-dismiss="modal" aria-label="Close">                    <span aria-hidden="true">×</span>                </button>                <h4 >下载方式</h4>            </div>            <div >                <div >                    <div >                        <p>直接下载</p>                        <div ><a  href="#"><span ></span>iPhone   下载</a></div>                        <div ><a  href="#">Android 下载</a></div>                    </div>                    <div >                        <p>扫描二维码下载</p>                        <div ><img src="images/qr-code.webp"/></div>                    </div>                    <p >   也可在AppStore、豌豆荚 直接搜索 “饭盒儿”</p>                </div>            </div>            <div >                <button type="button"  data-dismiss="modal">                    我知道了                </button>            </div>        </div>    </div></div><!--end modal1--><!--start modal2--><div   role="dialog" aria-label="myModalLabel" aria-hidden="true">    <div >        <div >            <div >                <button type="button"  data-dismiss="modal" aria-label="Close">                    <span aria-hidden="true">×</span>                </button>                <h4 >注册信息</h4>            </div>            <div >                <form>                    <div >                        <label >用户名：</label>                        <input type="text"  name="username">                    </div>                    <div >                        <label >密码：</label>                        <input type="password" >                    </div>                </form>            </div>            <div >                <button type="button"  data-dismiss="modal">                    关闭                </button>                <button type="button" >                    保存                </button>            </div>        </div>    </div></div><!--end modal2--><script>//    $("#myModal").modal("show");//    $("#myModal").modal({//        keyboard:true//    });//    $("#myModal").modal({//        backdrop:false//    });    $("#myModal2").on("show.bs.modal",function(e){        var button=$(e.relatedTarget);        var recipient=button.data("whatever");        var modal=$(this);        modal.find(".modal-title").text("hello"+recipient);        modal.find(".modal-body input[name='username']").val(recipient);    });</script></body></html>

展开全文阅读