当前位置：首页 >前端技术 > [Bootstrap]modal弹出框

[Bootstrap]modal弹出框

写在前面

在实际开发中，为了友好，更需要一种美观的弹出框，js原生的alert，很难满足需求。这里推荐一个bootstrap的弹出框。

一个例子

先看效果吧

代码：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>模式弹出框</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><link href="Css/bootstrap.min.css" rel="stylesheet" /><script src="JS/jquery.js"></script><script src="JS/bootstrap.min.js"></script><script></script><style>.blue {background-color: #0094ff;}.text-center {text-align: center;}</style></head><body><input type="button" data-target="#loginModal" data-toggle="modal" name="name" class="form-control  bt-red" value="登录" /><!-- modal --><div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header blue">登录</div><div class="modal-body"><input type="text" class="form-control" placeholder="请输入用户名" name="name" /><input type="password" class="form-control" placeholder="请输入密码" value="新建文件夹" name="name" /></div><div class="modal-footer"><div class="form-control text-center">登录</div><div class="form-control text-center" data-dismiss="modal"><div class="button"></div>取消</div></div></div></div></div></body></html>

注意
data-target属性，指向了model的id，所以点击按钮，model就会弹出来了。

用js也可以来控制

<script>$("#btnLogin").click(function () {//显示$("#loginModal").modal("show");//隐藏$('#loginModal').modal('hide');//切换$('#myModal').modal('toogle');});</script>