Modal提示框插件的使用
之前有記錄過類似美化alert(),confirm()和prompt功能的插件xcConfirm，其優(yōu)點(diǎn)是比較輕量級，能夠快速接入，對于簡單的提示效果明顯，但其缺點(diǎn)就是自定義起來不方便，所以就記錄一款相對較重但是可以隨意定義的插件Modal，下面記錄一下該款插件的使用方法，詳情可參考Modal的官方文檔http://v4.bootcss.com/getting-started/introduction/
Modal插件使用需要接入bootstrap.css和bootstrap.js，所以去bootstrap官網(wǎng)對應(yīng)下載后臨時文件夾的目錄如下：
然后在temp.html內(nèi)定義一個button和一個Modal(其中button和input的樣式都來自于bootstrap.min.css :btn btn-default和form-control long),并對button設(shè)置data-target="Modal的id" data-toggle="modal" 屬性來綁定對應(yīng)的Modal,來實(shí)現(xiàn)一個簡單的彈窗功能，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'>點(diǎn)我點(diǎn)我</button><!--Modal部分,默認(rèn)不顯示，內(nèi)部樣式自己隨意定義--><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="請輸入標(biāo)題" id="title" style="margin-bottom: 15px;"/><textarea class='form-control' placeholder="請輸入內(nèi)容" 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()">確認(rèn)</button><button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button></div></div></div></div></body> </html><script> function myPrint() {var title=$("#title").val();var content=$("#content").val();alert(title+"\n"+content); } </script>然后打開頁面只有一個按鈕：
點(diǎn)擊后就彈出Modal框：
這些input的樣式，按鈕的樣式都是可以自己定義的，相對之前就方便許多。通過設(shè)置data-target="#myModal" data-toggle="modal"是讓按鈕自動綁定彈框，使其點(diǎn)擊按鈕時自動彈出與隱藏，其實(shí)如果只設(shè)置data-target="#myModal"就可以實(shí)現(xiàn)Modal框的手動彈出與隱藏了，這時只需在JS里調(diào)用
$("myModal").modal('show')和$("myModal").modal('hide')即可手動開關(guān)，這種情況比較適合于某一行帶標(biāo)識id參數(shù)的彈框處理，因?yàn)檫@時候要安排好彈框的先后順序以及那個按鈕的click()事件。最后再對Modal框上的“確定按鈕”和“取消按鈕”綁定對應(yīng)的方法即可，恩，還是這種自定義的比較Under Control！?
?
轉(zhuǎn)載于:https://www.cnblogs.com/martianShu/p/5950174.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的Modal提示框插件的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript案例三：动态显示时间
- 下一篇： CentOS下启动oracle数据库（转