bootstrap彈出模態框
阿新 • • 發佈：2019-01-05
（1）引入jquery, bootstrap相關的
jquery下載地址：
bootstrap下載地址：
https://v3.bootcss.com/getting-started/#download
然後在head中引入：
<link rel="stylesheet" href="./lib/bootstrap-4.0.0/dist/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./lib/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>
（2）寫一個案例：
<!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> add body content here </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
在modal-dialog 後面新增樣式：class="modal-dialog modal-lg"可以調整
（3）整合後：
<html> <head> <link rel="stylesheet" href="./lib/bootstrap-4.0.0/dist/css/bootstrap.min.css" type="text/css" /> <script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="./lib/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script> </head> <body> <div id="test"> <button id="button" class="btn btn-default" style="margin-left: 100px; margin-top: 100px;">click me to show</button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> add body content here </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> $(function () { $("#button").click(function () { $('#exampleModal').modal('show'); }); }); </script> </body> </html>