Modal提示框插件的使用
之前有記錄過類似美化alert(),confirm()和prompt功能的插件xcConfirm，其優點是比較輕量級，能夠快速接入，對于簡單的提示效果明顯，但其缺點就是自定義起來不方便，所以就記錄一款相對較重但是可以隨意定義的插件Modal，下面記錄一下該款插件的使用方法，詳情可參考Modal的官方文檔http://v4.bootcss.com/getting-started/introduction/
Modal插件使用需要接入bootstrap.css和bootstrap.js，所以去bootstrap官網對應下載后臨時文件夾的目錄如下：
然后在temp.html內定義一個button和一個Modal(其中button和input的樣式都來自于bootstrap.min.css :btn btn-default和form-control long),并對button設置data-target="Modal的id" data-toggle="modal" 屬性來綁定對應的Modal,來實現一個簡單的彈窗功能，html如下：
<!doctype html> <html><head><title>Modal測試</title><!--引入bootstrap樣式--><link type='text/css' rel='stylesheet' href="bootstrap.min.css"><script src='jquery.js'></script><script src='bootstrap.min.js'></script></head><body><!--為button綁定Modal--><button type='button' class='btn btn-default' data-target='#myModal' data-toggle='modal'>點我點我</button><!--Modal部分,默認不顯示，內部樣式自己隨意定義--><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog" style="width: 700px;margin-top: 150px;"><div class="modal-content" style="height: 400px;width: 700px;padding-left: 10px;padding-right: 10px"><!--頭部--><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">信息記錄</h4></div><!--體部--><div class="modal-body" style="height: 200px"><input class="form-control" placeholder="請輸入標題" id="title" style="margin-bottom: 15px;"/><textarea class='form-control' placeholder="請輸入內容" id="content" style='height:180px;'></textarea></div><!--尾部--><div class="modal-footer" style="margin-top: 75px;"><button type="button" class="btn btn-primary btn-blue" onclick="myPrint()">確認</button><button type="button" class="btn btn-default" data-dismiss="modal">關閉</button></div></div></div></div></body> </html><script> function myPrint() {var title=$("#title").val();var content=$("#content").val();alert(title+"\n"+content); } </script>然后打開頁面只有一個按鈕：
點擊后就彈出Modal框：
這些input的樣式，按鈕的樣式都是可以自己定義的，相對之前就方便許多。通過設置data-target="#myModal" data-toggle="modal"是讓按鈕自動綁定彈框，使其點擊按鈕時自動彈出與隱藏，其實如果只設置data-target="#myModal"就可以實現Modal框的手動彈出與隱藏了，這時只需在JS里調用
$("myModal").modal('show')和$("myModal").modal('hide')即可手動開關，這種情況比較適合于某一行帶標識id參數的彈框處理，因為這時候要安排好彈框的先后順序以及那個按鈕的click()事件。最后再對Modal框上的“確定按鈕”和“取消按鈕”綁定對應的方法即可，恩，還是這種自定義的比較Under Control！?
?
轉載于:https://www.cnblogs.com/martianShu/p/5950174.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的Modal提示框插件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript案例三：动态显示时间
- 下一篇： 【转载】jQuery插件开发精品教程，让