【BootStrap】--登录加载模态框提示

最新推荐文章于 2023-05-15 11:26:59 发布

喵喵7781

最新推荐文章于 2023-05-15 11:26:59 发布

阅读量5.8k

点赞数

分类专栏：前端文章标签： BootStrap 模态框

本文链接：https://blog.csdn.net/wangmei4968/article/details/48439385

版权

前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

前言

有心的朋友不难发现，不少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情况的数据，显示即可。

总结

全心全意为人民服务是我们的宗旨。所有复杂的技术都是一步一步简单的技术点组建起来的。有的时候不是难，而是缺乏一步一步分析的耐心和一步一步坚持做下去的坚定。