如何在按钮元素上显示div内容？

Question

我有特定要求的密码输入字段。当用户单击输入字段div时，将显示元素。问题是“提交”按钮显示在div中。我想知道如何在该按钮上显示div？这是示例：

$("input[type='password']").keyup(checkPsw).focus(function() {
  $(".pswd_info").show();
}).blur(function() {
  $(".pswd_info").hide();
});

function checkPsw() {
  var pswd = $(this).val();

  //validate the length
  if (pswd.length < 8) {
    $(this).closest(".panel-body").find(".length").removeClass('valid').addClass('invalid');
  } else {
    $(this).closest(".panel-body").find(".length").removeClass('invalid').addClass('valid');
  }

  //validate letter
  if (pswd.match(/[a-z]/)) {
    $(this).closest(".panel-body").find(".letter").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".letter").removeClass('valid').addClass('invalid');
  }

  //validate capital letter
  if (pswd.match(/[A-Z]/)) {
    $(this).closest(".panel-body").find(".capital").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".capital").removeClass('valid').addClass('invalid');
  }

  //validate special character
  if (pswd.match(/(?=.*[?!@#$%^&*-])/)) {
    $(this).closest(".panel-body").find(".character").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".character").removeClass('valid').addClass('invalid');
  }

  //validate number
  if (pswd.match(/\d/)) {
    $(this).closest(".panel-body").find(".number").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".number").removeClass('valid').addClass('invalid');
  }
}

.pswd_info {
  display: none;
  position: absolute;
  font-size: .875em;
}

.pswd_info::before {
  content: "\25B2";
  position: absolute;
  top: -12px;
  left: 45%;
  font-size: 14px;
  line-height: 12px;
  color: #337ab7;
  text-shadow: none;
  display: block;
}

.pswd_info ul {
  margin: 0;
  padding: 0;
}

.pswd_info li {
  list-style: none;
}

.invalid {
  background: url(../images/invalid.png) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  color: #ec3f41;
}

.valid {
  background: url(../images/valid.png) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  color: #3a7d34;
}

.message-submit {
  display: none;
  padding: 5px 15px !important;
  margin: 0px !important;
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form name="frmMyaccount" id="frmMyaccount" class="submit-hearing" data-method="MyAccount" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="fname"><span class="label label-primary">First Name</span></label>
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="lname"><span class="label label-primary">Last Name</span></label>
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="username"><span class="label label-primary">UserName</span></label>
    <input type="text" class="form-control check-account" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
  </div>
  <div class="form-group">
    <label class="control-label" for="password"><span class="label label-primary">Password</span></label>
    <input type="password" class="form-control" name="frm_password" id="frm_password" placeholder="Enter Password" maxlength="64">
    <small id="passwordHelp" class="form-text text-muted">Special characters allowed:  <span class="text-danger"><b> ? ! @ # $ % ^ & * -</b></span></small>
    <div class="panel panel-primary pswd_info">
      <div class="panel-heading">
        <h5>Password requirements:</h5>
      </div>
      <div class="panel-body">
        <ul>
          <li class="invalid letter">At least <strong>one letter</strong></li>
          <li class="invalid capital">At least <strong>one capital letter</strong></li>
          <li class="invalid number">At least <strong>one number</strong></li>
          <li class="invalid character">At least <strong>one special character</strong></li>
          <li class="invalid length">Be at least <strong>8 characters</strong></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="form-group required">
    <label class="control-label" for="email"><span class="label label-primary">Email address</span></label>
    <input type="email" class="form-control" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-11 col-lg-11">
      <div id="frm_message" class="alert message-submit"></div>
    </div>
  </div>
</form>

如果运行该代码段并单击密码输入字段，您将在div内看到显示密码要求的Submit按钮。解决此问题的最佳方法是什么？

Answer 1

将z-index添加到pswd_info。在我的测试中，z-index：9999起作用了。

.pswd_info {
  display: none;
  position: absolute;
  font-size: .875em;
  z-index:9999;
}

Answer 2

只需将属性 z-index 添加到您的div和按钮中，以便该按钮显示在div下。

//Your password div
.pswd_info {
  z-index: 10;
}

//Your button
#frm_submit {
    z-index: -10;
}

$("input[type='password']").keyup(checkPsw).focus(function() {
  $(".pswd_info").show();
}).blur(function() {
  $(".pswd_info").hide();
});

function checkPsw() {
  var pswd = $(this).val();

  //validate the length
  if (pswd.length < 8) {
    $(this).closest(".panel-body").find(".length").removeClass('valid').addClass('invalid');
  } else {
    $(this).closest(".panel-body").find(".length").removeClass('invalid').addClass('valid');
  }

  //validate letter
  if (pswd.match(/[a-z]/)) {
    $(this).closest(".panel-body").find(".letter").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".letter").removeClass('valid').addClass('invalid');
  }

  //validate capital letter
  if (pswd.match(/[A-Z]/)) {
    $(this).closest(".panel-body").find(".capital").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".capital").removeClass('valid').addClass('invalid');
  }

  //validate special character
  if (pswd.match(/(?=.*[?!@#$%^&*-])/)) {
    $(this).closest(".panel-body").find(".character").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".character").removeClass('valid').addClass('invalid');
  }

  //validate number
  if (pswd.match(/\d/)) {
    $(this).closest(".panel-body").find(".number").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".number").removeClass('valid').addClass('invalid');
  }
}

.pswd_info {
  display: none;
  position: absolute;
  font-size: .875em;
  z-index: 10;
}

.pswd_info::before {
  content: "\25B2";
  position: absolute;
  top: -12px;
  left: 45%;
  font-size: 14px;
  line-height: 12px;
  color: #337ab7;
  text-shadow: none;
  display: block;
}

.pswd_info ul {
  margin: 0;
  padding: 0;
}

.pswd_info li {
  list-style: none;
}

.invalid {
  background: url(../images/invalid.png) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  color: #ec3f41;
}

.valid {
  background: url(../images/valid.png) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  color: #3a7d34;
}

.message-submit {
  display: none;
  padding: 5px 15px !important;
  margin: 0px !important;
}

#frm_submit {
 z-index: -10;
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form name="frmMyaccount" id="frmMyaccount" class="submit-hearing" data-method="MyAccount" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="fname"><span class="label label-primary">First Name</span></label>
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="lname"><span class="label label-primary">Last Name</span></label>
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="username"><span class="label label-primary">UserName</span></label>
    <input type="text" class="form-control check-account" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
  </div>
  <div class="form-group">
    <label class="control-label" for="password"><span class="label label-primary">Password</span></label>
    <input type="password" class="form-control" name="frm_password" id="frm_password" placeholder="Enter Password" maxlength="64">
    <small id="passwordHelp" class="form-text text-muted">Special characters allowed:  <span class="text-danger"><b> ? ! @ # $ % ^ & * -</b></span></small>
    <div class="panel panel-primary pswd_info">
      <div class="panel-heading">
        <h5>Password requirements:</h5>
      </div>
      <div class="panel-body">
        <ul>
          <li class="invalid letter">At least <strong>one letter</strong></li>
          <li class="invalid capital">At least <strong>one capital letter</strong></li>
          <li class="invalid number">At least <strong>one number</strong></li>
          <li class="invalid character">At least <strong>one special character</strong></li>
          <li class="invalid length">Be at least <strong>8 characters</strong></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="form-group required">
    <label class="control-label" for="email"><span class="label label-primary">Email address</span></label>
    <input type="email" class="form-control" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-11 col-lg-11">
      <div id="frm_message" class="alert message-submit"></div>
    </div>
  </div>
</form>

Answer 3

这可以通过两种方式解决。

通过“ row”类删除外部div将解决此问题。此处无需使用类为“ row”的div。据我说，这是最好的方法，因为我们正在删除不需要的代码行，而不是使用CSS进行修复。

<div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-11 col-lg-11">
      <div id="frm_message" class="alert message-submit"></div>
    </div>
</div>

但是下面一行代码是解决问题的最简单方法。

.pswd_info {
  z-index: 1;
}

最好只对z-index使用所需的值（顺序），例如1,2等。如果不必要地使用较大的值（例如999），那么当您使用另一个div时，可能再次调整值例如在模式弹出窗口上显示。