将嵌套模式附加到外部div

Question

如何将此模式附加到外部div？

目前，它嵌套在具有固定高度的容器中。 我需要将其放置在该容器之外。

包含模式的Javascript：

client.fetchQueryProducts({collection_id: collectionID}).then(function(products) {

// Products ==  the array of products within the parent div
for (i = 0; i < products.length; i++) {
product = products[i];
var productHTML =   
'<div class="product" id="buy-button-'+i+'" data-product-id = "'+ product.id+'">'+
'<div class= "product">'+
'<div class = "image-overlay-container">' +
'</div>' +
'</div>'+
'</div>'+
'<div class = "product-modal" >'+
'<div class = "image-overlay-container">' +
'</div>' +
'<div class = "product-modal-close"></div>'+
'</div>';

打开模式的Javascript：

// open product modal
        $('.parent_div').on('click', '.image-overlay, .variant-image, .product-details', function(){
            console.log('clicked');
            $(this).parents('.product').find('.product-modal').show();
            if (!$('.product-modal-underlay').length) {
                $('body').append('<div class = "product-modal-underlay"></div>');
            }
        });

HTML：

<div class= "parent_div">
<div class= "products">
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
</div>
</div>

<div class= "external_div">
//* where modal would append *//
</div>

的CSS

.parent_div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: none;
  overflow-y: scroll;
}

非常感谢您的帮助。

Answer 1

您可能要使用JQuery的.wrap()方法（例如doc中的.wrap() ）：

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

使用.wrap() ，我们可以在内部<div>元素周围插入HTML结构，如下所示：

$( ".inner" ).wrap( "<div class='new'></div>" );

动态创建新的<div>元素并将其添加到DOM中。 结果是一个新的<div>包裹在每个匹配的元素周围：

<div class="container">
    <div class="new">
        <div class="inner">Hello</div>
    </div>
    <div class="new">
        <div class="inner">Goodbye</div>
    </div>
</div>

Answer 2

感谢您的帮助，最简单的解决方法是将ScrollTop（0）添加到父div onClick。

Javascript：

// open product modal
        $('.parent_div').on('click', '.image-overlay, .variant-image, .product-details', function(){
            console.log('clicked');
            $('.parent_div').scrollTop(0);
            $(this).parents('.product').find('.product-modal').show();
            if (!$('.product-modal-underlay').length) {
                $('body').append('<div class = "product-modal-underlay"></div>');
            }
        });