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