写在前面
在实际开发中,为了友好,更需要一种美观的弹出框,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>
总结
之所以推荐这个弹出框,是因为这个操作更方便,因为在项目中用到bootstrap,这样也不需要再去添加其他的引用了。如果用来作为提示框,可以修改modal-body中的内容为字符串就可以了。