如何在从 DOM 中移除的元素上添加渐变效果

Question

我正在尝试使用自定义模式，它工作正常，因为我想要实现的是单击完全删除 DOM 元素的 X，然后单击添加以将其恢复，但我现在想添加一些淡入淡出效果恢复和关闭模式时，添加到页面加载时模式已经显示，我希望它仅在单击时显示。 任何人都可以帮助我，我是一个学习者和新手，所以，请

 $(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) { <style>.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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <button type="button" class="" id="buttonAdd">Add</button> <div class="blu-modal modal-backdrop b-page"> <div class="blu-modal__container"> <button class="blu-modal__close"> <i></i> </button> <div class="blu-modal__header"> <div class="blu-modal__icon"></div> <h3 class="blu-modal__heading"> <div class="modal__header"> <div class="modal__header__image"> <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"> </div> <div class="modal__header__name-attr"> <div class="modal__header__name-attr__name"> iPhone 12 Mini 128GB Resmi </div> <div class="modal__header__name-attr__attribute"> Red </div> </div> </div> </h3> </div> <div class="blu-modal__body"> <div class="modal__body"> <div class="modal__body__detail"> <div class="modal__body__detail__attribute"> <div> <:----> </div> <div> <div id="attributes"> <div> <div class="attributes__section"> <div class="attributes--label-with-value"> <div class="attributes--label">Warna</div> <div class="attributes--label">: Red </div> <.----> </div> <div class="attributes--value"> <div> <div class="product-variant__color__thumb__wrapper b-flex"> <figure class="product-variant__color__thumb"> <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"> </figure> <figure class="product-variant__color__thumb"> <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"> </figure> <figure class="product-variant__color__thumb"> <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"> </figure> <figure class="product-variant__color__thumb"> <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"> </figure> <figure class="product-variant__color__thumb"> <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"> </figure> </div> <div></div> </div> </div> </div> </div> </div> </div> </div> <hr> </div> <div 2f0="" class="modal__body__price-qty"> <div class="modal__body__price-qty__price"> <div> <strong class="modal__body__price-qty__price__display"> Rp11.548.000 </strong> </div> <div> <strong class="modal__body__price-qty__price__display__list"> Rp16.999.000 </strong> </div> </div> <div class="modal__body__price-qty__quantity"> <button type="button" class="quantity-input-btn qtyminus btn-number input-box" field="quantity" data-id="1696"> <span class="fa fa-minus"></span> </button> <input type="number" min="1" class="quantity-input-value input-box" id="qty_1697" value="1"> <button type="button" class="quantity-input-btn qtyplus btn-number input-box" field="quantity" data-id="1696"> <span class="fa fa-plus"></span> </button> </div> </div> <div class="modal__body__add-to-cart"> <button type="button" class="blu-btn modal__body__add-to-cart__button b-full-width b-secondary"> <div class="blu-ripple">Tambah ke Bag </div> </button> </div> </div> </div> <div class="blu-modal__footer"></div> </div> <div class="blu-modal__mask"></div> </div> </body>

Answer 1

这是你要找的吗？ 我只是稍微编辑了 jquery。 因为 fadeOut() 最终在模态框上设置 display:none，所以实际元素仍然在页面上。 所以我们可以在单击添加按钮时再次引用它。

 $(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) { <style>.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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <button type="button" class="" id="buttonAdd">Add</button> <div class="blu-modal modal-backdrop b-page"> <div class="blu-modal__container"> <button class="blu-modal__close"> <i></i> </button> <div class="blu-modal__header"> <div class="blu-modal__icon"></div> <h3 class="blu-modal__heading"> <div class="modal__header"> <div class="modal__header__image"> <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"> </div> <div class="modal__header__name-attr"> <div class="modal__header__name-attr__name"> iPhone 12 Mini 128GB Resmi </div> <div class="modal__header__name-attr__attribute"> Red </div> </div> </div> </h3> </div> <div class="blu-modal__body"> <div class="modal__body"> <div class="modal__body__detail"> <div class="modal__body__detail__attribute"> <div> <:----> </div> <div> <div id="attributes"> <div> <div class="attributes__section"> <div class="attributes--label-with-value"> <div class="attributes--label">Warna</div> <div class="attributes--label">: Red </div> <.----> </div> <div class="attributes--value"> <div> <div class="product-variant__color__thumb__wrapper b-flex"> <figure class="product-variant__color__thumb"> <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"> </figure> <figure class="product-variant__color__thumb"> <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"> </figure> <figure class="product-variant__color__thumb"> <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"> </figure> <figure class="product-variant__color__thumb"> <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"> </figure> <figure class="product-variant__color__thumb"> <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"> </figure> </div> <div></div> </div> </div> </div> </div> </div> </div> </div> <hr> </div> <div 2f0="" class="modal__body__price-qty"> <div class="modal__body__price-qty__price"> <div> <strong class="modal__body__price-qty__price__display"> Rp11.548.000 </strong> </div> <div> <strong class="modal__body__price-qty__price__display__list"> Rp16.999.000 </strong> </div> </div> <div class="modal__body__price-qty__quantity"> <button type="button" class="quantity-input-btn qtyminus btn-number input-box" field="quantity" data-id="1696"> <span class="fa fa-minus"></span> </button> <input type="number" min="1" class="quantity-input-value input-box" id="qty_1697" value="1"> <button type="button" class="quantity-input-btn qtyplus btn-number input-box" field="quantity" data-id="1696"> <span class="fa fa-plus"></span> </button> </div> </div> <div class="modal__body__add-to-cart"> <button type="button" class="blu-btn modal__body__add-to-cart__button b-full-width b-secondary"> <div class="blu-ripple">Tambah ke Bag </div> </button> </div> </div> </div> <div class="blu-modal__footer"></div> </div> <div class="blu-modal__mask"></div> </div> </body>