bootstrap bootstrap-modal.js 模态对话框
bootstrap bootstrap-modal.js 模态对话框
image.png
image.png
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <button type="button" class="btn btn-danger" data-toggle="modal" data-target=".ex-modal-lg">大模态框</button> <div class="modal fade ex-modal-lg" tabindex="-1" role="dialog" aria-labelledby="largerModal"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header">larger modal header</div> <div class="modal-body"> <img src="img/img.jpg" style="padding: 5px;"> larger modal body</div> <div class="modal-footer">larger modal footer</div> </div> </div> </div> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".ex-modal-sm">小模态框</button> <div class="modal ex-modal-sm" tabindex="-1" role="dialog" aria-labelledby="smallmodal"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header">small modal header</div> <div class="modal-body"> <img src="img/img.jpg" style="padding: 5px;"> small modal body</div> <div class="modal-footer">small modal footer</div> </div> </div> </div> </body> </html>