Как отобразить содержимое div над элементом button? - PullRequest
Новая
       2

Как отобразить содержимое div над элементом button?

0 голосов
/ 27 сентября 2018

У меня есть поле ввода пароля с конкретными требованиями.Когда пользователь нажимает на поле ввода, элемент 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, которая отображает требования к паролю.Как лучше всего решить эту проблему?

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018

Просто добавьте атрибут 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>
0 голосов
/ 27 сентября 2018

Это можно решить двумя способами.

Удаление внешнего div с классом 'row' решит проблему.Здесь нет необходимости использовать div с классом 'row'.По моему мнению, это лучший способ, так как мы удаляем нежелательную строку кода вместо того, чтобы исправлять ее с помощью 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-индекса, например, 1,2 и т. Д. Если вы используете ненужное большее значение, например 999, то снова вы можете в конечном итоге настроить значения при использованииеще один div, который был показан поверх этого, скажем, модального всплывающего окна.

0 голосов
/ 27 сентября 2018

Добавить z-index в pswd_info.В моем тесте z-index: 9999 сработало. 

.pswd_info {
  display: none;
  position: absolute;
  font-size: .875em;
  z-index:9999;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...