Modal提示框插件的使用

時間 2019-11-19

標籤 modal 提示插件使用简体版

原文原文鏈接

　　以前有記錄過相似美化alert(),confirm()和prompt功能的插件xcConfirm，其優勢是比較輕量級，可以快速接入，對於簡單的提示效果明顯，但其缺點就是自定義起來不方便，因此就記錄一款相對較重可是能夠隨意定義的插件Modal，下面記錄一下該款插件的使用方法，詳情可參考Modal的官方文檔http://v4.bootcss.com/getting-started/introduction/css

　　Modal插件使用須要接入bootstrap.css和bootstrap.js，因此去bootstrap官網對應下載後臨時文件夾的目錄以下：html

　　而後在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以下：jquery

<!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>

　　而後打開頁面只有一個按鈕：bootstrap

　　點擊後就彈出Modal框：ide

　　這些input的樣式，按鈕的樣式都是能夠本身定義的，相對以前就方便許多。經過設置data-target="#myModal" data-toggle="modal"是讓按鈕自動綁定彈框，使其點擊按鈕時自動彈出與隱藏，其實若是隻設置data-target="#myModal"就能夠實現Modal框的手動彈出與隱藏了，這時只需在JS裏調用測試

$("myModal").modal('show')和$("myModal").modal('hide')便可手動開關，這種狀況比較適合於某一行帶標識id參數的彈框處理，由於這時候要安排好彈框的前後順序以及那個按鈕的click()事件。最後再對Modal框上的「肯定按鈕」和「取消按鈕」綁定對應的方法便可，恩，仍是這種自定義的比較Under Control！ spa

相關標籤/搜索