您的位置：首页 > Web前端 > BootStrap

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

2015-09-14 15:22 671 查看

前言

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

总结

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航