bootstrap+jquery同意协议功能
文章描述：
在网站注册或者其它申请的时候，会有协议合同，那么怎么使用bootstrap+jquery来实现同意协议功能呢？
同意协议功能需要用到Bootstrap模态框（Modal）插件，首先我们先看一下模态框（Modal）插件的用法。
首先载入Bootstrap js、css文件和jquery文件，代码如下：
<link rel="stylesheet" type="text/css" href="bootstrap3.3.7/css/bootstrap.min.css" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="bootstrap3.3.7/js/bootstrap.min.js"></script>html
使用bootstrap默认的模态框代码
<div class="container">
<h2>
创建模态框（Modal）
</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<hr>
<input type="checkbox" name="xy" class="chioseXy" value="0" id="RememberMe"/>
<button type="button" data-toggle="modal" data-target="#myModal" style="background: none;color: #333;" class="btn">我已阅读并同意《注册协议》</button>
<button type="button" class="btn btn-primary" id="btn-sub">提交</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">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="checklistXy()">
同意
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</div>
css
自定义css来美化和控制间距效果，代码如下：
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: none;
box-shadow: none;
}
.modal-dialog {
max-width: 800px !important;
width: 800px !important;
}
.modal-title {
width: 100%;
text-align: center;
}
.modal-header .close {
margin-top: -10px !important;
}
.modal-body {
height: 600px;
overflow-y: auto;
}
.modal-body p {
font-size: 18px;
}
.modal-footer {
display: block !important;
text-align: center !important;
}js
自定义点击同意协议后自动勾选同意和点击按钮判断是否同意协议，代码如下：
/*贷款协议勾选*/
function checklistXy(){
if($("#RememberMe[type='checkbox']").is(':checked')){
$('#RememberMe').prop('checked',true)
}else{
$('#RememberMe').prop('checked',true)
}
}
$("#btn-sub").on('click',function(){
if($('#RememberMe').prop('checked') == false){
alert('请先同意协议！')
return false;
}
});
发布时间：2021/08/12
发表评论