Bootstrap——可拖动模态框(Model)
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap——可拖动模态框(Model)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
還是上一個(gè)小項(xiàng)目，o(╥﹏╥)o，要實(shí)現(xiàn)點(diǎn)擊一個(gè)div或者button或者一個(gè)東西然后可以彈出一個(gè)浮在最上面的彈框。網(wǎng)上找了找，發(fā)現(xiàn)Bootstrap的Model彈出框可以實(shí)現(xiàn)該功能，因此學(xué)習(xí)了一下，實(shí)現(xiàn)了基本彈框功能（可拖動(dòng)）。
代碼如下：
<!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;}/*當(dāng)觸發(fā)模態(tài)框時(shí)會(huì)產(chǎn)生一個(gè)陰影層覆蓋整個(gè)頁面，設(shè)置 modal-backdrop 可以去除陰影層*/.modal-backdrop {filter: alpha(opacity=0)!important;opacity: 0!important;}</style></head><body><div class="div_main"><!-- botton按鈕有兩個(gè)屬性是data-toggle="model" data-target="#myModel"；第一個(gè)屬性代表我可以調(diào)取并展示一個(gè)模態(tài)框，第二個(gè)屬性表示我要展示的哪一個(gè)模態(tài)框，用id來標(biāo)識(shí)--><!-- data-backdrop="static"表示點(diǎn)擊空白的地方不會(huì)關(guān)閉彈窗--><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static" >打開驚喜</button><!-- class = "modal"，用來把 <div> 的內(nèi)容識(shí)別為模態(tài)框 class = "fade"，當(dāng)模態(tài)框被切換時(shí)，它會(huì)引起內(nèi)容淡入淡出--><!-- tabindex=-1代表此元素禁止使用鍵盤上的tab鍵對(duì)其導(dǎo)航，就是按tab鍵的時(shí)候，會(huì)跳過這個(gè)div 不設(shè)置tabindex的話，就會(huì)使Esc退出無效 --><!-- role=“dialog”代表這是一個(gè)對(duì)話框 --><!-- 屬性 aria-hidden="true" 用于保持模態(tài)窗口不可見，直到觸發(fā)器被觸發(fā)為止（比如點(diǎn)擊在相關(guān)的按鈕上） --><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 是為模態(tài)窗口的頭部定義樣式的類 --><div class="modal-header" style="background: pink; width: 100%; height: 10%;"><!-- close 是一個(gè) CSS class，用于為模態(tài)窗口的關(guān)閉按鈕設(shè)置樣式 --><!-- data-dismiss="modal"，是一個(gè)自定義的 HTML5 data 屬性，在這里它被用于關(guān)閉模態(tài)窗口 --><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">關(guān)閉</span></button><h4 class="modal-title">窗口標(biāo)題</h4></div><!-- class="modal-body"，是 Bootstrap CSS 的一個(gè) CSS class，用于為模態(tài)窗口的主體設(shè)置樣式 --><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 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --><script src="./src/js/bootstrap.min.js"></script><script src="./src/js/jquery-ui.min.js"></script><script>// 在模態(tài)框出現(xiàn)后添加可拖拽功能 $(document).on("show.bs.modal", ".modal", function() {// draggable 屬性規(guī)定元素是否可拖動(dòng) $(this).draggable({handle: ".modal-header", // 只能點(diǎn)擊頭部拖動(dòng) cursor: 'move' //光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）, });$(this).css("overflow", "hidden"); // 防止出現(xiàn)滾動(dòng)條，出現(xiàn)的話，你會(huì)把滾動(dòng)條一起拖著走的 });</script></body> </html>點(diǎn)擊按鈕，會(huì)彈框顯示，并且彈框可以拖動(dòng)
運(yùn)行效果如下：
注意：
Bootstrap為v3版本
相應(yīng)的js插件網(wǎng)上都可以輕松下載
轉(zhuǎn)載于:https://www.cnblogs.com/FHC1994/p/11318271.html
總結(jié)
以上是生活随笔為你收集整理的Bootstrap——可拖动模态框(Model)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到摘彼岸花意味着什么
- 下一篇： 清除日志的sql