按钮在Firefox中排在最前，但Chrome不在

时间：2019-05-24 18:47:28

标签： javascript html css

我有几个输入，我希望按钮可以“附加”到输入上。我已经将它们附加到firefox的输入中，但是在Chrome浏览器中进行测试时，我看到它们位于输入的后面，并且它们不在应有的位置。我知道这里有很多样式可能不太合适，但是当我试图“简化”时，效果并不是很好。

jQuery(function() {
  $(document).on("click", "#openModal", function() {
    $(this).blur();
    openThis("editModal");
  });

  $(document).on("click", ".top.close-button", function() {
    $(this).blur();
    let modal = $(this).parent().parent().parent();
    modal.effect("fade", 150, function() {
      modal.removeClass("open");
    });
  });

  $(document).on("click", ".close-button:not(.top)", function() {
    closeThis($(this));
  });

  $(document).on("click", ".toggle-button", function() {
    let input = $(this).siblings(".toggle");
    input.prop('disabled', function(i, v) {
      return !v;
    });
    $(this).toggleClass("enabled");
    if ($(this).hasClass("enabled")) {
      input.focus();
      input.select();
    }
    $(this).blur();
  });
});


// This comes from an outside stylesheet in the project.
function openThis(elmID) {
  document.getElementById(elmID).classList.add("open");
}

/**
 *
 * @param {jQuery} calledObj JQuery Dom object that would
 * @param {function} after Optional function to be completed after this function is done.
 */
function closeThis(calledObj, after = function() {}) {
  calledObj.blur();
  let modal = calledObj.parent().parent().parent().parent();
  modal.effect("fade", 150, function() {
    modal.removeClass("open");
  });

  if (isFunction(after)) {
    after();
  } else {
    console.error("Expected after to be function, actual type was " + {}.toString.call(after));
  }
}

function isFunction(functionToCheck) {
  return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
}
/* Google fonts */


/* vietnamese */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v9/6xKtdSZaM9iE8KbpRA_hJFQNcOM.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v9/6xKtdSZaM9iE8KbpRA_hJVQNcOM.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v9/6xKtdSZaM9iE8KbpRA_hK1QN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: lightgray;
  font-family: "Quicksand", Verdana, sans-serif;
  font-size: 112.5%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  max-width: 1400px;
  flex: 1 1 auto;
  width: 100%;
  margin: auto;
  display: flex;
  padding: 0 8px;
  flex-flow: row wrap;
  /*-------- Elements --------*/
  /*--------- Classes --------*/
}
main p {
  margin: 5px 0;
}
main a {
  text-decoration: none;
}
main label {
  font-size: 1.3rem;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
main progress {
  width: 100%;
  display: inline;
}
main table {
  width: 100%;
  max-width: 100%;
  border: solid black 1px;
  border-collapse: collapse;
}
main table td, main table th {
  border: solid black 1px;
  padding: 5px 15px;
}
main table tr:nth-child(even) {
  background: #BBBBBB;
}
main table th {
  background: black;
  color: white;
}
main table td.action {
  width: 150px;
}
main span.grade {
  padding: 5px 10px;
  border-radius: 5px;
  background: gray;
  color: white;
  display: inline-flex;
}
main span.grade span {
  font-weight: bold;
}
main span.grade span.grade-value {
  padding: 2px 5px;
  border-radius: 5px;
  margin-left: 5px;
}
main span.grade span.good-grade {
  color: lightgreen;
  background: darkgreen;
}
main span.grade span.poor-grade {
  color: darkorange;
  background: orange;
}
main span.grade span.bad-grad {
  color: red;
  background: lightpink;
}
main span.info-title {
  font-weight: bolder;
}
main hr {
  border-top: 1px solid black;
  width: 100%;
}
main progress[value]::after {
  content: attr(value);
}
main .data-container {
  width: 100%;
  overflow-wrap: break-word;
  display: flex;
  flex-flow: row wrap;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
main .data-container div {
  flex: 1 1 25%;
  border: solid thin #ddd;
  margin: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
main .data-container div.result-card {
  background: white;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
main .full-width {
  width: 100%;
}
main .loading-message, main .domain-list {
  width: 100%;
}
main .icon {
  width: 1.25em;
  height: 1.25em;
  margin: -0.25em 0.25em;
  display: inline-block;
}
main .ssl {
  background: url("../image/policy.png");
  background-size: 100%;
}
main .col-3 {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  display: grid;
  grid-template: repeat(auto-fill, minmax(50px, 1fr))/repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 25px;
  align-content: end;
}
main .col-3 .grid-group {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
main .col-3 .grid-group button {
  margin: 0 5px;
}

header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

footer {
  text-align: center;
}
footer .footer-container {
  margin: 15px 0;
}
footer .footer-container > * {
  border-left: thin solid #696969;
  padding: 0 2px;
}
footer .footer-container > *:nth-child(1) {
  border-left: none;
}
footer .footer-container a {
  color: #9c9c9c;
  font-weight: bold;
  text-decoration: none;
  transition: 0.2s;
}
footer .footer-container a:hover {
  color: #b6b6b6;
}

header, footer {
  background: #212f3d;
  color: white;
  padding: 1px 20px;
}
header .home-link, footer .home-link {
  color: white;
  text-decoration: none;
}
header .home-link:visited, footer .home-link:visited {
  color: white;
  text-decoration: none;
}

input {
  border-radius: 4px;
  border: 1px grey solid;
  padding: 8px;
}
input.block {
  width: 100%;
}

input:focus {
  box-shadow: 0 0 5px lightskyblue;
}

button::-moz-focus-inner {
  border: 0;
}
button.button {
  border-radius: 4px;
  padding: 4px 6px;
  border: none;
  background: #696969;
  color: #FFF;
  font-weight: bold;
  transition: 0.2s;
}
button.button.large {
  font-size: 1.5rem;
}
button.button:hover {
  cursor: pointer;
  background: #808080;
}
button.button:focus {
  outline: none;
  background: #696969;
}
button.button:active {
  color: lightgray;
}
button.button:disabled {
  background: #BCF5A6;
  color: lightgray;
}
button.button:disabled:hover {
  background: #BCF5A6;
  color: lightgray;
  cursor: not-allowed;
}
button.button.function {
  background: green;
  color: white;
}
button.button.function:hover {
  background: darkgreen;
}
button.button.function:focus {
  background: green;
}
button.button.function:active {
  background: #00b300;
}
button.button.login {
  background: transparent;
  border: 2px solid #00b300;
  color: #00b300;
}
button.button.login:hover {
  color: #212f3d;
  background: #00b300;
}
button.button.login:focus {
  background: transparent;
  color: #00b300;
}
button.button.login:active {
  background: #009a00;
  color: #212f3d;
}

.action-container {
  margin: auto;
}

.hidden {
  display: none;
}

.margin-bottom {
  margin-bottom: 10px;
}

.icon-button {
  display: inline-block;
  width: 46px;
  height: 46px;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  color: transparent;
  position: relative;
  cursor: pointer;
}
.icon-button:after {
  content: attr(data-title);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 120, 160, 0.4);
  color: white;
  text-shadow: 2px 2px 2px #135, 2px 2px 2px #135;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  font-weight: bold;
  transition: 0.25s ease-out 0s;
  font-size: 0.9rem;
  font-family: "Source Sans Pro", sans-serif;
  border-radius: 4px;
}
.icon-button:hover:after {
  opacity: 1;
  transition: 0.25s ease-out 0.15s;
}
.icon-button.edit {
  background: url(https://res.cloudinary.com/ez-nettools/image/upload/v1531840058/icon-pencil_mvibsb.png) center no-repeat white;
  background-size: 22px;
}
.icon-button.delete {
  background: url(https://res.cloudinary.com/ez-nettools/image/upload/v1531840058/icon-delete_mb6mlt.png) center no-repeat white;
  background-size: 18px;
}

.modal-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(173, 186, 188, 0.6);
  display: none;
}
.modal-wrapper.open {
  display: flex;
}
.modal-wrapper .modal-content {
  max-height: 90vh;
  overflow: auto;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px 16px;
}
.modal-wrapper .modal-content label {
  font-weight: bold;
  align-self: center;
  margin-right: 10px;
}
.modal-wrapper .modal-content .modal-input-group {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
}
.modal-wrapper .modal-content .modal-input-group .input-button-group button {
  position: absolute;
  right: 0;
  padding: 9px;
  border-radius: 0 4px 4px 0;
}
.modal-wrapper .modal-content .modal-input-group .input-button-group button.enabled {
  background: green;
}
.modal-wrapper .modal-content .modal-input-group .input-button-group button.enabled:hover {
  background: darkgreen;
}
.modal-wrapper .modal-content .button-controls {
  margin-top: 16px;
}
.modal-wrapper .modal-content h2 {
  text-align: center;
  border-bottom: solid 1px darkgrey;
}
.modal-wrapper .modal {
  max-width: 520px;
  min-width: 100px;
  background: #212f3d;
  min-height: 100px;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px #000;
  border: solid 1px white;
}
.modal-wrapper .modal .modal-bar {
  text-align: right;
}
.modal-wrapper .modal .modal-bar .top.close-button {
  display: inline-block;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 46px;
  line-height: 0.85;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0 0 0 4px;
}
.modal-wrapper .modal .modal-bar .top.close-button:hover {
  background: rgba(255, 255, 255, 0.2);
}
.modal-wrapper .modal .modal-bar .top.close-button:active {
  color: lightgray;
  outline: none;
}
.modal-wrapper .modal .modal-bar .top.close-button:focus {
  background: transparent;
}
.modal-wrapper.open .modal {
  animation: 0.15s popIn cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
<link href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<main>
  <div class="full-width">
    <button id="openModal" class="button" type="button">Open Modal</button>
  </div>
</main>

<div id="editModal" class="modal-wrapper">
  <section class="modal">
    <div class="modal-bar">
      <button type="button" id="close_modal_button" class="top close-button" role="button" aria-pressed="false" aria-label="close">&times;
            </button>
    </div>
    <div class="modal-content">
      <h2>Edit User</h2>
      <div class="modal-input-group">
        <label for="editModalFirstName">First Name</label>
        <input id="editModalFirstName" type="text" value="">
      </div>
      <div class="modal-input-group">
        <label for="editModalLastName">Last Name</label>
        <input id="editModalLastName" type="text" value="">
      </div>
      <div class="modal-input-group">
        <label for="editModalEmail">Email</label>
        <input id="editModalEmail" type="email" value="">
      </div>
      <div class="modal-input-group">
        <label for="editModalType">Type</label>
        <input id="editModalType" type="text" value="">
      </div>
      <div class="modal-input-group">
        <label for="editModalLogin">Login</label>
        <div class="input-button-group">
          <input id="editModalLogin" class="toggle" type="text" value="" disabled>
          <button id="toggleLogin" class="toggle-button button" role="button" aria-pressed="false" data-toggle="editModalLogin" aria-label="Toggle Login Field"><span
                                class="fas fa-edit"></span></button>
        </div>
      </div>
      <div class="modal-input-group">
        <label for="editModalPassword">Password</label>
        <div class="input-button-group">
          <input id="editModalPassword" class="toggle" type="password" value="********" disabled>
          <button id="togglePassword" class="toggle-button button" role="button" aria-pressed="false" data-toggle="editModalPassword" aria-label="Toggle Password Field"><span
                                class="fas fa-edit"></span></button>
        </div>
      </div>
      <input id="editModalID" type="hidden" value="">
      <div class="modal-input-group button-controls">
        <button id="saveUser" type="button" class="function large button" role="button" aria-pressed="false">
                    Save Changes
                </button>
        <button id="cancelEditUser" type="button" class="close-button large button" role="button" aria-pressed="false" aria-label="close">Cancel
                </button>
      </div>
    </div>
  </section>
</div>

2 个答案:

答案 0 :(得分：1)

您唯一需要做的就是为正确的浮动元素交换它们。

jQuery(function() {
  $(document).on("click", "#openModal", function() {
    $(this).blur();
    openThis("editModal");
  });

  $(document).on("click", ".top.close-button", function() {
    $(this).blur();
    let modal = $(this).parent().parent().parent();
    modal.effect("fade", 150, function() {
      modal.removeClass("open");
    });
  });

  $(document).on("click", ".close-button:not(.top)", function() {
    closeThis($(this));
  });

  $(document).on("click", ".toggle-button", function() {
    let input = $(this).siblings(".toggle");
    input.prop('disabled', function(i, v) {
      return !v;
    });
    $(this).toggleClass("enabled");
    if ($(this).hasClass("enabled")) {
      input.focus();
      input.select();
    }
    $(this).blur();
  });
});


// This comes from an outside stylesheet in the project.
function openThis(elmID) {
  document.getElementById(elmID).classList.add("open");
}

/**
 *
 * @param {jQuery} calledObj JQuery Dom object that would
 * @param {function} after Optional function to be completed after this function is done.
 */
function closeThis(calledObj, after = function() {}) {
  calledObj.blur();
  let modal = calledObj.parent().parent().parent().parent();
  modal.effect("fade", 150, function() {
    modal.removeClass("open");
  });

  if (isFunction(after)) {
    after();
  } else {
    console.error("Expected after to be function, actual type was " + {}.toString.call(after));
  }
}

function isFunction(functionToCheck) {
  return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
}
/* Google fonts */


/* vietnamese */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v9/6xKtdSZaM9iE8KbpRA_hJFQNcOM.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v9/6xKtdSZaM9iE8KbpRA_hJVQNcOM.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v9/6xKtdSZaM9iE8KbpRA_hK1QN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: lightgray;
  font-family: "Quicksand", Verdana, sans-serif;
  font-size: 112.5%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  max-width: 1400px;
  flex: 1 1 auto;
  width: 100%;
  margin: auto;
  display: flex;
  padding: 0 8px;
  flex-flow: row wrap;
  /*-------- Elements --------*/
  /*--------- Classes --------*/
}
main p {
  margin: 5px 0;
}
main a {
  text-decoration: none;
}
main label {
  font-size: 1.3rem;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
main progress {
  width: 100%;
  display: inline;
}
main table {
  width: 100%;
  max-width: 100%;
  border: solid black 1px;
  border-collapse: collapse;
}
main table td, main table th {
  border: solid black 1px;
  padding: 5px 15px;
}
main table tr:nth-child(even) {
  background: #BBBBBB;
}
main table th {
  background: black;
  color: white;
}
main table td.action {
  width: 150px;
}
main span.grade {
  padding: 5px 10px;
  border-radius: 5px;
  background: gray;
  color: white;
  display: inline-flex;
}
main span.grade span {
  font-weight: bold;
}
main span.grade span.grade-value {
  padding: 2px 5px;
  border-radius: 5px;
  margin-left: 5px;
}
main span.grade span.good-grade {
  color: lightgreen;
  background: darkgreen;
}
main span.grade span.poor-grade {
  color: darkorange;
  background: orange;
}
main span.grade span.bad-grad {
  color: red;
  background: lightpink;
}
main span.info-title {
  font-weight: bolder;
}
main hr {
  border-top: 1px solid black;
  width: 100%;
}
main progress[value]::after {
  content: attr(value);
}
main .data-container {
  width: 100%;
  overflow-wrap: break-word;
  display: flex;
  flex-flow: row wrap;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
main .data-container div {
  flex: 1 1 25%;
  border: solid thin #ddd;
  margin: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
main .data-container div.result-card {
  background: white;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
main .full-width {
  width: 100%;
}
main .loading-message, main .domain-list {
  width: 100%;
}
main .icon {
  width: 1.25em;
  height: 1.25em;
  margin: -0.25em 0.25em;
  display: inline-block;
}
main .ssl {
  background: url("../image/policy.png");
  background-size: 100%;
}
main .col-3 {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  display: grid;
  grid-template: repeat(auto-fill, minmax(50px, 1fr))/repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 25px;
  align-content: end;
}
main .col-3 .grid-group {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
main .col-3 .grid-group button {
  margin: 0 5px;
}

header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

footer {
  text-align: center;
}
footer .footer-container {
  margin: 15px 0;
}
footer .footer-container > * {
  border-left: thin solid #696969;
  padding: 0 2px;
}
footer .footer-container > *:nth-child(1) {
  border-left: none;
}
footer .footer-container a {
  color: #9c9c9c;
  font-weight: bold;
  text-decoration: none;
  transition: 0.2s;
}
footer .footer-container a:hover {
  color: #b6b6b6;
}

header, footer {
  background: #212f3d;
  color: white;
  padding: 1px 20px;
}
header .home-link, footer .home-link {
  color: white;
  text-decoration: none;
}
header .home-link:visited, footer .home-link:visited {
  color: white;
  text-decoration: none;
}

input {
  border-radius: 4px;
  border: 1px grey solid;
  padding: 8px;
}
input.block {
  width: 100%;
}

input:focus {
  box-shadow: 0 0 5px lightskyblue;
}

button::-moz-focus-inner {
  border: 0;
}
button.button {
  border-radius: 4px;
  padding: 4px 6px;
  border: none;
  background: #696969;
  color: #FFF;
  font-weight: bold;
  transition: 0.2s;
}
button.button.large {
  font-size: 1.5rem;
}
button.button:hover {
  cursor: pointer;
  background: #808080;
}
button.button:focus {
  outline: none;
  background: #696969;
}
button.button:active {
  color: lightgray;
}
button.button:disabled {
  background: #BCF5A6;
  color: lightgray;
}
button.button:disabled:hover {
  background: #BCF5A6;
  color: lightgray;
  cursor: not-allowed;
}
button.button.function {
  background: green;
  color: white;
}
button.button.function:hover {
  background: darkgreen;
}
button.button.function:focus {
  background: green;
}
button.button.function:active {
  background: #00b300;
}
button.button.login {
  background: transparent;
  border: 2px solid #00b300;
  color: #00b300;
}
button.button.login:hover {
  color: #212f3d;
  background: #00b300;
}
button.button.login:focus {
  background: transparent;
  color: #00b300;
}
button.button.login:active {
  background: #009a00;
  color: #212f3d;
}

.action-container {
  margin: auto;
}

.hidden {
  display: none;
}

.margin-bottom {
  margin-bottom: 10px;
}

.icon-button {
  display: inline-block;
  width: 46px;
  height: 46px;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  color: transparent;
  position: relative;
  cursor: pointer;
}
.icon-button:after {
  content: attr(data-title);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 120, 160, 0.4);
  color: white;
  text-shadow: 2px 2px 2px #135, 2px 2px 2px #135;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  font-weight: bold;
  transition: 0.25s ease-out 0s;
  font-size: 0.9rem;
  font-family: "Source Sans Pro", sans-serif;
  border-radius: 4px;
}
.icon-button:hover:after {
  opacity: 1;
  transition: 0.25s ease-out 0.15s;
}
.icon-button.edit {
  background: url(https://res.cloudinary.com/ez-nettools/image/upload/v1531840058/icon-pencil_mvibsb.png) center no-repeat white;
  background-size: 22px;
}
.icon-button.delete {
  background: url(https://res.cloudinary.com/ez-nettools/image/upload/v1531840058/icon-delete_mb6mlt.png) center no-repeat white;
  background-size: 18px;
}

.modal-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(173, 186, 188, 0.6);
  display: none;
}
.modal-wrapper.open {
  display: flex;
}
.modal-wrapper .modal-content {
  max-height: 90vh;
  overflow: auto;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px 16px;
}
.modal-wrapper .modal-content label {
  font-weight: bold;
  align-self: center;
  margin-right: 10px;
}
.modal-wrapper .modal-content .modal-input-group {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
}
.modal-wrapper .modal-content .modal-input-group .input-button-group button {
  position: absolute;
  right: 0;
  padding: 9px;
  border-radius: 0 4px 4px 0;
}
.modal-wrapper .modal-content .modal-input-group .input-button-group button.enabled {
  background: green;
}
.modal-wrapper .modal-content .modal-input-group .input-button-group button.enabled:hover {
  background: darkgreen;
}
.modal-wrapper .modal-content .button-controls {
  margin-top: 16px;
}
.modal-wrapper .modal-content h2 {
  text-align: center;
  border-bottom: solid 1px darkgrey;
}
.modal-wrapper .modal {
  max-width: 520px;
  min-width: 100px;
  background: #212f3d;
  min-height: 100px;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px #000;
  border: solid 1px white;
}
.modal-wrapper .modal .modal-bar {
  text-align: right;
}
.modal-wrapper .modal .modal-bar .top.close-button {
  display: inline-block;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 46px;
  line-height: 0.85;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0 0 0 4px;
}
.modal-wrapper .modal .modal-bar .top.close-button:hover {
  background: rgba(255, 255, 255, 0.2);
}
.modal-wrapper .modal .modal-bar .top.close-button:active {
  color: lightgray;
  outline: none;
}
.modal-wrapper .modal .modal-bar .top.close-button:focus {
  background: transparent;
}
.modal-wrapper.open .modal {
  animation: 0.15s popIn cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
<link href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<main>
  <div class="full-width">
    <button id="openModal" class="button" type="button">Open Modal</button>
  </div>
</main>

<div id="editModal" class="modal-wrapper">
  <section class="modal">
    <div class="modal-bar">
      <button type="button" id="close_modal_button" class="top close-button" role="button" aria-pressed="false" aria-label="close">&times;
            </button>
    </div>
    <div class="modal-content">
      <h2>Edit User</h2>
      <div class="modal-input-group">
        <label for="editModalFirstName">First Name</label>
        <input id="editModalFirstName" type="text" value="">
      </div>
      <div class="modal-input-group">
        <label for="editModalLastName">Last Name</label>
        <input id="editModalLastName" type="text" value="">
      </div>
      <div class="modal-input-group">
        <label for="editModalEmail">Email</label>
        <input id="editModalEmail" type="email" value="">
      </div>
      <div class="modal-input-group">
        <label for="editModalType">Type</label>
        <input id="editModalType" type="text" value="">
      </div>
      <div class="modal-input-group">
        <label for="editModalLogin">Login</label>
        <div class="input-button-group">
          <button id="toggleLogin" class="toggle-button button" role="button" aria-pressed="false" data-toggle="editModalLogin" aria-label="Toggle Login Field"><span
                                class="fas fa-edit"></span></button>
          <input id="editModalLogin" class="toggle" type="text" value="" disabled>
        </div>
      </div>
      <div class="modal-input-group">
        <label for="editModalPassword">Password</label>
        <div class="input-button-group">
          <button id="togglePassword" class="toggle-button button" role="button" aria-pressed="false" data-toggle="editModalPassword" aria-label="Toggle Password Field"><span
                                class="fas fa-edit"></span></button>
          <input id="editModalPassword" class="toggle" type="password" value="********" disabled>
        </div>
      </div>
      <input id="editModalID" type="hidden" value="">
      <div class="modal-input-group button-controls">
        <button id="saveUser" type="button" class="function large button" role="button" aria-pressed="false">
                    Save Changes
                </button>
        <button id="cancelEditUser" type="button" class="close-button large button" role="button" aria-pressed="false" aria-label="close">Cancel
                </button>
      </div>
    </div>
  </section>
</div>

这样，就可以了。

preview

答案 1 :(得分：1)

您需要做的就是将top: 0;添加到.modal-wrapper .modal-content .modal-input-group .input-button-group button。见下文：

.modal-wrapper .modal-content .modal-input-group .input-button-group button {
  top: 0;
  right: 0;
  position: absolute;
  padding: 9px;
  border-radius: 0 4px 4px 0;
}
相关问题
最新问题