Как добавить эффект fadin для элемента, удаляемого из DOM

#javascript #html #css

#язык JavaScript #HTML #CSS

Вопрос:

Я пытаюсь создать пользовательский модал, который отлично работает, потому что я хочу, чтобы нажать на X, который полностью удаляет элемент DOM, и нажать кнопку добавить, чтобы восстановить его, но теперь я хочу добавить некоторые эффекты затухания и затухания при восстановлении и закрытии модала, добавлено, что модал отображается уже при загрузке страницы, я хочу, чтобы он отображался только при нажатии. Кто-нибудь может мне помочь, пожалуйста, я тоже ученик и новичок, так что, пожалуйста

 $(document).ready(function() {  var toBeDeleted = $('.modal-backdrop');  $('.blu-modal__close').on('click', function(event) {  event.preventDefault();  $(toBeDeleted).detach().fadeOut(4000);  });  $('#buttonAdd').on('click', function(event) {  event.preventDefault();  if ($('body').find('.modal-backdrop').length == 0) {  $('body').append(toBeDeleted).fadeOut(4000);  }  }); });

 .modal-backdrop {  z-index: 4000; }  .blu-modal__container {  -webkit-transition: opacity .3s ease;  transition: opacity .3s ease;  width: 90%;  max-width: 500px;  height: auto;  background: #fff;  position: fixed;  z-index: 1000; }  @media screen and (min-width: 769px), print {  .blu-modal__container {  top: 50%;  left: 50%;  -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);  } }  .blu-modal.b-page .blu-modal__container {  max-height: calc(100% - 50px);  padding-top: 16px; }  @media screen and (min-width: 769px), print {  .blu-modal.b-page .blu-modal__container {  border-radius: 16px;  } }  .blu-modal.b-page .blu-modal__container {  width: 480px; }  .b-page .blu-modal__close {  position: absolute;  top: -20px;  right: 20px; }  .b-page .blu-modal__close i:before, .b-page .blu-modal__close i:after {  content: '';  width: 20px;  height: 4px;  border-radius: 4px;  background-color: #f1f1f1;  position: absolute; }  .b-page .blu-modal__close i:before {  -webkit-transform: rotate(45deg);  transform: rotate(45deg); }  .b-page .blu-modal__close i:after {  -webkit-transform: rotate(-45deg);  transform: rotate(-45deg); }  @media screen and (min-width: 769px), print {  .blu-modal.b-page .blu-modal__header {  padding: 0 32px;  } }  .blu-modal__heading {  font-family: "efframedium", Helvetica, Arial, sans-serif;  margin-bottom: 10px; }  .modal-backdrop .modal__header {  display: -ms-flexbox;  display: flex; }  .modal-backdrop .modal__header__image {  margin-right: 20px;  width: 100px;  height: 100px;  border-radius: 10px;  background-color: #ffffff; }  .modal-backdrop .modal__header__image img {  max-height: 100px;  min-width: 100px; }  .modal-backdrop .modal__header__name-attr {  -ms-flex-direction: column;  flex-direction: column;  margin: auto 0; }  .modal-backdrop .modal__header__name-attr__attribute {  font-size: 1.4rem;  font-weight: 500;  color: #BDBDBD; }  .blu-modal__body {  overflow-x: auto;  color: rgba(0, 0, 0, 0.6); }  @media screen and (min-width: 769px), print {  .blu-modal__body {  max-height: calc(100vh - 230px);  } }  .blu-modal.b-page .blu-modal__body {  color: rgba(0, 0, 0, 0.6); }  @media screen and (min-width: 769px), print {  .blu-modal.b-page .blu-modal__body {  padding: 0 32px;  } }  .modal-backdrop .modal__body {  display: -ms-flexbox;  display: flex;  -ms-flex-direction: column;  flex-direction: column;  padding-top: 10px; }  .modal-backdrop .modal__body__detail {  margin-bottom: 15px; }  .attributes__section {  width: 100%;  margin-bottom: 5px; }  .attributes--label-with-value {  display: -ms-flexbox;  display: flex; }  .attributes--label {  -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px);  color: rgba(0, 0, 0, 0.48);  font-size: 16px;  font-weight: bold;  vertical-align: top;  line-height: normal; }  .attributes--value {  overflow: scroll;  vertical-align: top;  font-size: 16px;  padding: 6px;  color: #0095da; }  .b-flex {  display: -webkit-box;  display: -ms-flexbox;  display: flex; }  @media only screen and (min-width: 63.75em) {  .product-variant__color__thumb__wrapper {  overflow: auto;  } }  .product-variant__color__thumb {  cursor: pointer;  margin: 2px;  display: -ms-inline-flexbox;  display: inline-flex; }  @media only screen and (min-width: 63.75em) {  lt;stylegt;.product-variant__color__thumb {  min-width: 60px;  margin: 8px;  display: -ms-inline-grid;  display: inline-grid;  } }  .product-variant__image {  background-color: #fff;  border: 2px solid #E0E0E0;  border-radius: 8px; }  @media only screen and (min-width: 63.75em) {  .product-variant__image {  overflow: auto;  width: 60px;  height: 60px;  } }  .product-variant__image__selected {  border-color: #41C3FF; }  .modal-backdrop .modal__body__price-qty {  display: -ms-flexbox;  display: flex;  margin-bottom: 15px; }  .modal-backdrop .modal__body__price-qty__price__display {  font-size: 20px;  font-weight: 600;  font-style: normal;  font-stretch: normal;  line-height: normal;  letter-spacing: normal;  color: #f37021; }  .modal-backdrop .modal__body__price-qty__price__display__list {  color: rgba(0, 0, 0, 0.48);  font-size: 15px;  text-decoration: line-through; }  .modal-backdrop .modal__body__price-qty__quantity {  display: -ms-flexbox;  display: flex;  margin-left: auto; }  .blu-modal__footer {  text-align: right; }  @media screen and (min-width: 769px), print {  .blu-modal.b-page .blu-modal__footer {  padding: 16px 32px;  } }  .blu-modal__mask {  -webkit-transition: opacity .3s ease;  transition: opacity .3s ease;  position: fixed;  z-index: 999;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.64);  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; }

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"gt;lt;/scriptgt;  lt;bodygt;    lt;button type="button" class="" id="buttonAdd"gt;Addlt;/buttongt;   lt;div class="blu-modal modal-backdrop b-page"gt;  lt;div class="blu-modal__container"gt;  lt;button class="blu-modal__close"gt;  lt;igt;lt;/igt;  lt;/buttongt;  lt;div class="blu-modal__header"gt;  lt;div class="blu-modal__icon"gt;lt;/divgt;  lt;h3 class="blu-modal__heading"gt;  lt;div class="modal__header"gt;  lt;div class="modal__header__image"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/full//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full05_mz4v26r0.jpg?output-format=webp" data-src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/full//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full05_mz4v26r0.jpg?output-format=webp"  alt="iPhone 12 Mini 128GB Resmi" class="lazyImage" draggable="false" data-loaded="true"gt;  lt;/divgt;  lt;div class="modal__header__name-attr"gt;  lt;div class="modal__header__name-attr__name"gt; iPhone 12 Mini 128GB Resmi lt;/divgt;  lt;div class="modal__header__name-attr__attribute"gt; Red lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/h3gt;  lt;/divgt;  lt;div class="blu-modal__body"gt;  lt;div class="modal__body"gt;  lt;div class="modal__body__detail"gt;  lt;div class="modal__body__detail__attribute"gt;  lt;divgt;  lt;!----gt;  lt;/divgt;  lt;divgt;  lt;div id="attributes"gt;  lt;divgt;  lt;div class="attributes__section"gt;  lt;div class="attributes--label-with-value"gt;  lt;div class="attributes--label"gt;Warnalt;/divgt;  lt;div class="attributes--label"gt; : Red lt;/divgt;  lt;!----gt;  lt;/divgt;  lt;div class="attributes--value"gt;  lt;divgt;  lt;div class="product-variant__color__thumb__wrapper b-flex"gt;  lt;figure class="product-variant__color__thumb"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/thumbnail//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full06_s5xmq8zt.jpg" alt="White" class="product-variant__image"gt;  lt;/figuregt;  lt;figure class="product-variant__color__thumb"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/thumbnail//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full05_mz4v26r0.jpg" alt="Red" class="product-variant__image product-variant__image__selected"gt;  lt;/figuregt;  lt;figure class="product-variant__color__thumb"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/thumbnail//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full03_tdkcqg4k.jpg" alt="Green" class="product-variant__image"gt;  lt;/figuregt;  lt;figure class="product-variant__color__thumb"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/thumbnail//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full02_ftornd3v.jpg" alt="Blue" class="product-variant__image"gt;  lt;/figuregt;  lt;figure class="product-variant__color__thumb"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/thumbnail//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full01_ee17vwzj.jpg" alt="Black" class="product-variant__image"gt;  lt;/figuregt;  lt;/divgt;  lt;divgt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;hrgt;  lt;/divgt;  lt;div 2f0="" class="modal__body__price-qty"gt;  lt;div class="modal__body__price-qty__price"gt;  lt;divgt;  lt;strong class="modal__body__price-qty__price__display"gt; Rp11.548.000 lt;/stronggt;  lt;/divgt;  lt;divgt;  lt;strong class="modal__body__price-qty__price__display__list"gt; Rp16.999.000 lt;/stronggt;  lt;/divgt;  lt;/divgt;  lt;div class="modal__body__price-qty__quantity"gt;  lt;button type="button" class="quantity-input-btn qtyminus btn-number input-box" field="quantity" data-id="1696"gt;  lt;span class="fa fa-minus"gt;lt;/spangt;  lt;/buttongt;  lt;input type="number" min="1" class="quantity-input-value input-box" id="qty_1697" value="1"gt;  lt;button type="button" class="quantity-input-btn qtyplus btn-number input-box" field="quantity" data-id="1696"gt;  lt;span class="fa fa-plus"gt;lt;/spangt;  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;div class="modal__body__add-to-cart"gt;  lt;button type="button" class="blu-btn modal__body__add-to-cart__button b-full-width b-secondary"gt;  lt;div class="blu-ripple"gt;Tambah ke Bag lt;/divgt;  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="blu-modal__footer"gt;lt;/divgt;  lt;/divgt;  lt;div class="blu-modal__mask"gt;lt;/divgt;  lt;/divgt; lt;/bodygt;

Ответ №1:

Это то, что вы искали? Я просто немного отредактировал jquery. Поскольку функция fadeOut() в конечном итоге устанавливает отображение:нет в модальном, фактический элемент все еще находится на странице. Поэтому мы можем просто сослаться на него снова, когда нажмем кнопку добавить.

 $(document).ready(function() {  var toBeDeleted = $('.modal-backdrop');  $('.blu-modal__close').on('click', function(event) {  event.preventDefault();  $(toBeDeleted).fadeOut(1000);  });  $('#buttonAdd').on('click', function(event) {  event.preventDefault();  $('.modal-backdrop').fadeIn(1000);  }); });

 .modal-backdrop {  z-index: 4000; }  .blu-modal__container {  -webkit-transition: opacity .3s ease;  transition: opacity .3s ease;  width: 90%;  max-width: 500px;  height: auto;  background: #fff;  position: fixed;  z-index: 1000; }  @media screen and (min-width: 769px), print {  .blu-modal__container {  top: 50%;  left: 50%;  -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);  } }  .blu-modal.b-page .blu-modal__container {  max-height: calc(100% - 50px);  padding-top: 16px; }  @media screen and (min-width: 769px), print {  .blu-modal.b-page .blu-modal__container {  border-radius: 16px;  } }  .blu-modal.b-page .blu-modal__container {  width: 480px; }  .b-page .blu-modal__close {  position: absolute;  top: -20px;  right: 20px; }  .b-page .blu-modal__close i:before, .b-page .blu-modal__close i:after {  content: '';  width: 20px;  height: 4px;  border-radius: 4px;  background-color: #f1f1f1;  position: absolute; }  .b-page .blu-modal__close i:before {  -webkit-transform: rotate(45deg);  transform: rotate(45deg); }  .b-page .blu-modal__close i:after {  -webkit-transform: rotate(-45deg);  transform: rotate(-45deg); }  @media screen and (min-width: 769px), print {  .blu-modal.b-page .blu-modal__header {  padding: 0 32px;  } }  .blu-modal__heading {  font-family: "efframedium", Helvetica, Arial, sans-serif;  margin-bottom: 10px; }  .modal-backdrop .modal__header {  display: -ms-flexbox;  display: flex; }  .modal-backdrop .modal__header__image {  margin-right: 20px;  width: 100px;  height: 100px;  border-radius: 10px;  background-color: #ffffff; }  .modal-backdrop .modal__header__image img {  max-height: 100px;  min-width: 100px; }  .modal-backdrop .modal__header__name-attr {  -ms-flex-direction: column;  flex-direction: column;  margin: auto 0; }  .modal-backdrop .modal__header__name-attr__attribute {  font-size: 1.4rem;  font-weight: 500;  color: #BDBDBD; }  .blu-modal__body {  overflow-x: auto;  color: rgba(0, 0, 0, 0.6); }  @media screen and (min-width: 769px), print {  .blu-modal__body {  max-height: calc(100vh - 230px);  } }  .blu-modal.b-page .blu-modal__body {  color: rgba(0, 0, 0, 0.6); }  @media screen and (min-width: 769px), print {  .blu-modal.b-page .blu-modal__body {  padding: 0 32px;  } }  .modal-backdrop .modal__body {  display: -ms-flexbox;  display: flex;  -ms-flex-direction: column;  flex-direction: column;  padding-top: 10px; }  .modal-backdrop .modal__body__detail {  margin-bottom: 15px; }  .attributes__section {  width: 100%;  margin-bottom: 5px; }  .attributes--label-with-value {  display: -ms-flexbox;  display: flex; }  .attributes--label {  -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px);  color: rgba(0, 0, 0, 0.48);  font-size: 16px;  font-weight: bold;  vertical-align: top;  line-height: normal; }  .attributes--value {  overflow: scroll;  vertical-align: top;  font-size: 16px;  padding: 6px;  color: #0095da; }  .b-flex {  display: -webkit-box;  display: -ms-flexbox;  display: flex; }  @media only screen and (min-width: 63.75em) {  .product-variant__color__thumb__wrapper {  overflow: auto;  } }  .product-variant__color__thumb {  cursor: pointer;  margin: 2px;  display: -ms-inline-flexbox;  display: inline-flex; }  @media only screen and (min-width: 63.75em) {  lt;stylegt;.product-variant__color__thumb {  min-width: 60px;  margin: 8px;  display: -ms-inline-grid;  display: inline-grid;  } }  .product-variant__image {  background-color: #fff;  border: 2px solid #E0E0E0;  border-radius: 8px; }  @media only screen and (min-width: 63.75em) {  .product-variant__image {  overflow: auto;  width: 60px;  height: 60px;  } }  .product-variant__image__selected {  border-color: #41C3FF; }  .modal-backdrop .modal__body__price-qty {  display: -ms-flexbox;  display: flex;  margin-bottom: 15px; }  .modal-backdrop .modal__body__price-qty__price__display {  font-size: 20px;  font-weight: 600;  font-style: normal;  font-stretch: normal;  line-height: normal;  letter-spacing: normal;  color: #f37021; }  .modal-backdrop .modal__body__price-qty__price__display__list {  color: rgba(0, 0, 0, 0.48);  font-size: 15px;  text-decoration: line-through; }  .modal-backdrop .modal__body__price-qty__quantity {  display: -ms-flexbox;  display: flex;  margin-left: auto; }  .blu-modal__footer {  text-align: right; }  @media screen and (min-width: 769px), print {  .blu-modal.b-page .blu-modal__footer {  padding: 16px 32px;  } }  .blu-modal__mask {  -webkit-transition: opacity .3s ease;  transition: opacity .3s ease;  position: fixed;  z-index: 999;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.64);  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; }

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"gt;lt;/scriptgt;  lt;bodygt;   lt;button type="button" class="" id="buttonAdd"gt;Addlt;/buttongt;   lt;div class="blu-modal modal-backdrop b-page"gt;  lt;div class="blu-modal__container"gt;  lt;button class="blu-modal__close"gt;  lt;igt;lt;/igt;  lt;/buttongt;  lt;div class="blu-modal__header"gt;  lt;div class="blu-modal__icon"gt;lt;/divgt;  lt;h3 class="blu-modal__heading"gt;  lt;div class="modal__header"gt;  lt;div class="modal__header__image"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/full//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full05_mz4v26r0.jpg?output-format=webp" data-src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/full//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full05_mz4v26r0.jpg?output-format=webp"  alt="iPhone 12 Mini 128GB Resmi" class="lazyImage" draggable="false" data-loaded="true"gt;  lt;/divgt;  lt;div class="modal__header__name-attr"gt;  lt;div class="modal__header__name-attr__name"gt; iPhone 12 Mini 128GB Resmi lt;/divgt;  lt;div class="modal__header__name-attr__attribute"gt; Red lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/h3gt;  lt;/divgt;  lt;div class="blu-modal__body"gt;  lt;div class="modal__body"gt;  lt;div class="modal__body__detail"gt;  lt;div class="modal__body__detail__attribute"gt;  lt;divgt;  lt;!----gt;  lt;/divgt;  lt;divgt;  lt;div id="attributes"gt;  lt;divgt;  lt;div class="attributes__section"gt;  lt;div class="attributes--label-with-value"gt;  lt;div class="attributes--label"gt;Warnalt;/divgt;  lt;div class="attributes--label"gt; : Red lt;/divgt;  lt;!----gt;  lt;/divgt;  lt;div class="attributes--value"gt;  lt;divgt;  lt;div class="product-variant__color__thumb__wrapper b-flex"gt;  lt;figure class="product-variant__color__thumb"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/thumbnail//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full06_s5xmq8zt.jpg" alt="White" class="product-variant__image"gt;  lt;/figuregt;  lt;figure class="product-variant__color__thumb"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/thumbnail//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full05_mz4v26r0.jpg" alt="Red" class="product-variant__image product-variant__image__selected"gt;  lt;/figuregt;  lt;figure class="product-variant__color__thumb"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/thumbnail//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full03_tdkcqg4k.jpg" alt="Green" class="product-variant__image"gt;  lt;/figuregt;  lt;figure class="product-variant__color__thumb"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/thumbnail//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full02_ftornd3v.jpg" alt="Blue" class="product-variant__image"gt;  lt;/figuregt;  lt;figure class="product-variant__color__thumb"gt;  lt;img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/thumbnail//90/MTA-11741139/apple_iphone_12_mini_128gb_resmi_full01_ee17vwzj.jpg" alt="Black" class="product-variant__image"gt;  lt;/figuregt;  lt;/divgt;  lt;divgt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;hrgt;  lt;/divgt;  lt;div 2f0="" class="modal__body__price-qty"gt;  lt;div class="modal__body__price-qty__price"gt;  lt;divgt;  lt;strong class="modal__body__price-qty__price__display"gt; Rp11.548.000 lt;/stronggt;  lt;/divgt;  lt;divgt;  lt;strong class="modal__body__price-qty__price__display__list"gt; Rp16.999.000 lt;/stronggt;  lt;/divgt;  lt;/divgt;  lt;div class="modal__body__price-qty__quantity"gt;  lt;button type="button" class="quantity-input-btn qtyminus btn-number input-box" field="quantity" data-id="1696"gt;  lt;span class="fa fa-minus"gt;lt;/spangt;  lt;/buttongt;  lt;input type="number" min="1" class="quantity-input-value input-box" id="qty_1697" value="1"gt;  lt;button type="button" class="quantity-input-btn qtyplus btn-number input-box" field="quantity" data-id="1696"gt;  lt;span class="fa fa-plus"gt;lt;/spangt;  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;div class="modal__body__add-to-cart"gt;  lt;button type="button" class="blu-btn modal__body__add-to-cart__button b-full-width b-secondary"gt;  lt;div class="blu-ripple"gt;Tambah ke Bag lt;/divgt;  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="blu-modal__footer"gt;lt;/divgt;  lt;/divgt;  lt;div class="blu-modal__mask"gt;lt;/divgt;  lt;/divgt; lt;/bodygt;

1. Спасибо за помощь, но я хочу добиться того, чтобы элемент div «модальный фон», содержащий модальный фон, был удален из DOM, я не хочу его скрывать, но полностью удаляю его из DOM, но с некоторыми эффектами затухания и затухания

2. Хмм. вы можете удалить его из dom после исчезновения, но как потом его прикрепить? Его там больше не будет.