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）：

<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上。

使用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>');
            }
        });

将嵌套模态附加到外部div

2 个答案: