jquery提示框代码+样式

1.代码.vue

<div class="form-group">
            <li class="fa fa-res fa-user fa-lg"></li>
            <input class="form-control required" type="text" placeholder="用户名" id="userCode" name="username"
                   v-model="user.username"
                   autofocus="autofocus"/>
          </div>

          <div class="form-group" style="margin-top: -10px;">
            <li class="fa fa-lock fa-lg"></li>
            <input class="form-control required" type="password" placeholder="密码" id="userPass" name="password"
                   v-model="user.password"
            />
          </div>
          <div class="form-group" style="margin-top: 26px">
            <input class="form-control-static required" id="verifycode" name="verifycode" type="text" placeholder="验证码"
                   v-model="user.verifycode"
                   style="width: 64%;padding-left:8px;"/>

            <div class="yzm" @click="refreshCode" alt="看不清楚？请点击刷新验证码" title="看不清楚？请点击刷新验证码">
              <img
                slot="suffix"
                :src="identifyCode"
                width="100px"
                height="34px"/>
            </div>
          </div>
          <div class="form-group" style="overflow: hidden; margin-top: 30px">
            <input type="button" class="btn btn-danger pull-right col-md-12" id="send-btn" value="登		录"  @click="submitData()"/>
          </div>
          <!--<div class="notice">信息科技部/大数据中心预计将于3月12日22:00起对商保核心系统生产环境数据库磁盘阵列进行迁移升级，预计停机时间持续12-24小时，届时远程出单系统将暂停应用服务。</div>-->
</form>





        if (!userName){
          $(".dialog-box").show();
          $(".dialog-bg").show();
          $("#btn-confirm").hide();
          $("#res-info").html("用户名不能为空！");
          $("#userCode").focus();
          return;
        }
        if (!password){
          $(".dialog-box").show();
          $(".dialog-bg").show();
          $("#btn-confirm").hide();
          $("#res-info").html("密码不能为空！");
          $("#userPass").focus();
          return;
        }
        if (!verifycode){
          $(".dialog-box").show();
          $(".dialog-bg").show();
          $("#btn-confirm").hide();
          $("#res-info").html("验证码不能为空！");
          $("#verifycode").focus();
          return;
        }
        $("#send-btn").attr("disabled","disabled");

2.样式.css

.dialog-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  filter: alpha(opacity=40);
  -webkit-opacity: .4;
     -moz-opacity: .4;
      -ms-opacity: .4;
          opacity: .4;
  z-index: 1059;
}
.dialog-box {
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  background-color: #FFF;
  line-height: 1.24;
  z-index: 1060;
}
.dialog-content {
  margin: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}
.dialog-content::-webkit-scrollbar { width: 0 !important }/*chrome 和Safari和opera*/
.dialog-content { -ms-overflow-style: none; }/*IE 10+和edge*/
.dialog-content { overflow: -moz-scrollbars-none; }/*Firefox*/

.dialog-text {
  /* margin-bottom: 20px; */
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  color: #d43f3a;
}

.click {
  margin: 20px;
}