介绍
介绍
福哥今天本来打算多弄几个页面，后来在实现注册页面的服务协议这里花了点时间。在早以前注册页面的服务协议就是在表单里增加一个复选框一个指向服务协议具体内容的链接即可。可是福哥参考大厂的注册页面发现现在已经不这样处理了，都是弄一个遮罩，弹出一个对话框，在里面直接显示服务协议内容，只有同意了才能继续，否则自动转到首页去。福哥决定不能被时代落下啊，所以改变了注册页面的设计，采用了这种方式实现服务协议这块。
用户注册页面
HTML
福哥只提供了wrapper-content部分，其他的部分没有变化就省了。
<div class="wrapper-content"> <!-- register form begin --> <div class="row login-form"> <div class="col-sm-12"> <h3 class="text-center">注册</h3> <p>输入用户名注册用户管理系统，密码要输入两次以保证我们得到的密码是准确无误的</p> <form> <div class="form-group"> <label>用户名</label> <input class="form-control" type="text" name="user" /> </div> <div class="form-group"> <label>密码</label> <input class="form-control" type="password" name="pass" /> </div> <div class="form-group"> <label>确认密码</label> <input class="form-control" type="password" name="pass" /> </div> <div class="form-group"> <label>验证码</label> <div> <input class="form-control form-vsn" type="text" name="vsn" /> <img src="images/verifycode.png" /> </div> </div> <div class="form-group"> <button class="btn btn-primary btn-sm form-control">登录</button> </div> </form> </div> </div> <!-- register form end --> <!-- dialog begin --> <div class="row dlg-mask"> </div> <div class="row dlg-box"> <div class="col-sm-12"> <div class="row dlg-header"> <div class="col-sm-12 overflow-hidden"> <div class="float-left dlg-title"> 服务与协议 </div> <div class="float-right dlg-tool-box"> <i>X</i> </div> </div> </div> <div class="row dlg-content"> <div class="col-sm-12"> <div class="overflow-auto" style="height: 300px;"> <p> 【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。 如您因系统服务与TFUMS发生争议的，适用《TFUMS系统服务协议》处理。如您在使用系统服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。 </p> <p> 【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。 如您因系统服务与TFUMS发生争议的，适用《TFUMS系统服务协议》处理。如您在使用系统服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。 </p> <p> 【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。 如您因系统服务与TFUMS发生争议的，适用《TFUMS系统服务协议》处理。如您在使用系统服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。 </p> <p> 【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。 如您因系统服务与TFUMS发生争议的，适用《TFUMS系统服务协议》处理。如您在使用系统服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。 </p> </div> <div class="text-center py-3"> <button class="btn btn-danger btn-xs btn-agreement">同意协议</button> </div> </div> </div> </div> </div> <!-- dialog end --> </div>
CSS
这是register form和dialog的样式。
/**
* register form
*/
.btn-agreement{
width: 200px;
}
/**
* dialog
*/
.dlg-mask{
display: block;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: #000;
opacity:0.58;
filter:alpha(opacity=58);
}
.dlg-box{
display: block;
position: fixed;
top: 15%;
left: 50%;
margin-left: -225px;
width: 520px;
z-index: 1200;
background: #fff;
}
.dlg-header{
padding: 12px 0;
border-top: 3px solid #eee;
border-bottom: 1px solid #eee;
}
.dlg-header .dlg-title{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: unset;
font-weight: 500;
}
.dlg-header .dlg-tool-box i{
font-style: normal;
cursor: pointer;
}
.dlg-content{
padding: 12px 0;
}
讲解
用户注册页面
用户注册页面进入后第一时间看到的是一个服务协议的对话框，这个对话框放在一个半透明的遮罩层上面。要实现这个对话框不难，要实现遮罩层的比较复杂。
遮罩层需要铺满全屏并且盖住所有内容，这里面就用到了fixed显示模式、z-index三维轴距、半透明处理。
对话框很简单大家可以直接看HTML代码和CSS样式表就行了，不过要注意两点：
1）对话框不能放到遮罩层下面，否则会被一起透明化了。
2）遮罩层是fixed显示模式，实现水平居中需要一点技巧。
注册表单的验证码行比较特殊，需要将输入框和图片验证码放在一行上，这个需要一点特殊处理才行。
总结
今天童鞋们跟着福哥完成了TFUMS系统的注册页面的模板的制作，学会了验证码的组合技巧，学会了遮罩的使用，学会了对话框的设计。
下一课，福哥将一次完成几个没有特殊设计的页面，加快一下进度了，大家不要掉队哦~~
