還是上一個小項目，o(╥﹏╥)o，要實現點擊一個div或者button或者一個東西然后可以彈出一個浮在最上面的彈框。網上找了找，發現Bootstrap的Model彈出框可以實現該功能，因此學習了一下，實現了基本彈框功能（可拖動）。
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <link href="./src/css/bootstrap.min.css" rel="stylesheet"> <style> html,body{ width: 100%; height: 100%; padding: 0; margin: 0; } .div_main{ width: 100%; height: 100%; background: gray; } .bacstyle{ /* background: red; */ width: 1000px; height: 600px; } /*當觸發模態框時會產生一個陰影層覆蓋整個頁面，設置 modal-backdrop 可以去除陰影層*/ .modal-backdrop { filter: alpha(opacity=0)!important; opacity: 0!important; } </style> </head> <body> <div class="div_main"> <!-- botton按鈕有兩個屬性是data-toggle="model" data-target="#myModel"；第一個屬性代表我可以調取並展示一個模態框，第二個屬性表示我要展示的哪一個模態框，用id來標識--> <!-- data-backdrop="static"表示點擊空白的地方不會關閉彈窗--> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static" >打開驚喜</button> <!-- class = "modal"，用來把 <div> 的內容識別為模態框 class = "fade"，當模態框被切換時，它會引起內容淡入淡出--> <!-- tabindex=-1代表此元素禁止使用鍵盤上的tab鍵對其導航，就是按tab鍵的時候，會跳過這個div 不設置tabindex的話，就會使Esc退出無效 --> <!-- role=“dialog”代表這是一個對話框 --> <!-- 屬性 aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發為止（比如點擊在相關的按鈕上） --> <div class="modal inmodal" id="myModal" role="dialog" aria-hidden="true"> <div class="modal-dialog bacstyle"> <div class="modal-content" style="width: 100%;height: 100%;"> <!-- modal-header 是為模態窗口的頭部定義樣式的類 --> <div class="modal-header" style="background: pink; width: 100%; height: 10%;"> <!-- close 是一個 CSS class，用於為模態窗口的關閉按鈕設置樣式 --> <!-- data-dismiss="modal"，是一個自定義的 HTML5 data 屬性，在這里它被用於關閉模態窗口 --> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">關閉</span></button> <h4 class="modal-title">窗口標題</h4> </div> <!-- class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的主體設置樣式 --> <div class="modal-body" style="background: green; width: 100%; height: 90%;"> 湖人&&火箭總冠軍 </div> </div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="./src/js/jquery.min.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --> <script src="./src/js/bootstrap.min.js"></script> <script src="./src/js/jquery-ui.min.js"></script> <script> // 在模態框出現后添加可拖拽功能 $(document).on("show.bs.modal", ".modal", function() { // draggable 屬性規定元素是否可拖動 $(this).draggable({ handle: ".modal-header", // 只能點擊頭部拖動 cursor: 'move' //光標呈現為指示鏈接的指針（一只手）, }); $(this).css("overflow", "hidden"); // 防止出現滾動條，出現的話，你會把滾動條一起拖着走的 }); </script> </body> </html>
點擊按鈕，會彈框顯示，並且彈框可以拖動
運行效果如下：
注意：
Bootstrap為v3版本
相應的js插件網上都可以輕松下載