【BootStrap】--登入載入模態框提示

ZeroWM發表於2015-09-14
boot

前言

         有心的朋友不難發現，不少BS系統，使用者登入之後，會立馬彈出一個彈出框，寫著使用者的操作情況，對使用者有很好的提示作用，提高了使用者體驗度。在新生入學系統V4.0中，也有類似的功能。新生馬上登陸新生入學系統後，會立馬彈出一個模態框，顯示該生有多少資訊還沒有錄入，繳費情況等等。那麼該彈出框如何實現的呢？下面讓我來揭曉。


效果圖


模態框程式碼實現

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 例項 - 模態框（Modal）外掛</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

    <h2>建立模態框（Modal）</h2>
    <!-- 按鈕觸發模態框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal"
        data-target="#myModal">
        開始演示模態框
    </button>

    <!-- 模態框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <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">
                    王美同學，您好！
                   <p>
                       您的<b style="color: blue">錄入資訊</b>中<b style="color: blue">家庭資訊</b>、<b style="color: blue">教育經歷</b>資訊已經完善完畢！還需要填寫<b style="color: blue">個人資訊</b>實現<b style="color: blue">繳費明細</b>就能報到成功啦！加油！
                   </p>
                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                        <div class ="pull-right">
                             <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>啟程
                        </div>
                       
                    </button>
                    @*按鈕*@
                    
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>   
    <!-- 模態框（Modal） -->
   

</body>

    @*頁面載入，顯示模態框*@
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myModal').modal('show');
        });
    </script>


</html>

需要完善

         現在模態框立馬的流程資料（例如 學生資訊  公約一覽）還是死的，下一步要做的就是在資料庫中存入相應的流程資訊，並給定判斷流程完成的條件。假設資料庫中，流程狀態為Status，完成為true，預設為false。則如果完成，則修改Status為true。顯示完成和未完成，需要遍歷資料庫的兩種Status情況的資料，顯示即可。


總結

        全心全意為人民服務是我們的宗旨。所有複雜的技術都是一步一步簡單的技術點組建起來的。有的時候不是難，而是缺乏一步一步分析的耐心和一步一步堅持做下去的堅定。




相關文章