bootstrap模态框实例

言曌 2017年01月25日16:17:29 1 2657 views

博主分享免费Java教学视频，B站账号：Java刘哥

下面是一个申请链接的实例效果图如下：

代码如下

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap模态框实例</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" data-backdrop="static">申请链接
</a>
<form action="__URL__/addLink" method="post" class="form-horizontal" id="askLink">
<div class="modal fade" id="myModal" tabindex="-1" style="color: #337AB7;">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">申请链接</h4>
</div>
<div class="modal-body">
<div class="form-group has-primary has-feedback">
<label for="linkName" class="col-sm-3 control-label">网站名称</label>
<div class="col-sm-8">
<input type="text" id="linkName" name="linkName" class="form-control" placeholder="如：静水博客" required="required">
</div>
</div>
<div class="form-group has-primary has-feedback">
<label for="linkUrl" class="col-sm-3 control-label">网站域名</label>
<div class="col-sm-8">
<input type="text" id="linkUrl" name="linkUrl" class="form-control" placeholder="如：http://www.liuyanzhao.com/" required="required">
</div>
</div>
<div class="form-group has-primary has-feedback">
<label for="linkEmail" class="col-sm-3 control-label">博主邮箱</label>
<div class="col-sm-8">
<input type="text" id="linkEmail" name="linkEmail" class="form-control" placeholder="如：847064370@qq.com" required="required">
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" onclick="checkForm()">提交申请»</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//模态框垂直居中
function centerModals() {
$('.modal').each(
function (i) {
var $clone = $(this).clone().css('display', 'block')
.appendTo('body');
var top = Math.round(($clone.height() - $clone.find(
'.modal-content').height()) / 2);
toptop = top > 0 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top",
top - 50);
});
}
$('.modal').on('show.bs.modal', centerModals);
$(window).on('resize', centerModals);
</script>
</body>
</html>