修改详情页面弹窗口效果

app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addto.phtml

@@ -41,7 +41,7 @@
 </style>
 <div style="width: 100%" class="product-view-freeshipping">
     <div class="product-intro__freeshipping product-intro__bg-none">
-        <div class="product-intro__freeshipping-abt action" data-trigger="trigger-freeshipping" >
+        <div class="product-intro__freeshipping-abt action"  id="freeshipping-button">
             <div class="product-intro__freeshipping-icon shipping " ><i class="svgicon svgicon-gd-shipping"></i> <p>Fast Delivery</p> <span class="svgicon svgicon-gd-more-grey product-intro__freeshipping-more" ></span>
 
             </div>
@@ -49,7 +49,7 @@
                 <p> Estimated to be delivered on <span id="deliveredTime">11/25/2021 - 12/03/2021</span>.</p> </div>
             </div>
 
-        <div  class="product-intro__freeshipping-item full-line paddingTop-0 paddingBottom-0  action" data-trigger="trigger-freeshipping-more" >
+        <div  class="product-intro__freeshipping-item full-line paddingTop-0 paddingBottom-0  action"  id="free-return-button" >
             <div class="product-intro__freeshipping-icon">
                 <i class="svgicon svgicon-gd-freereturn"></i><p>Free Return &amp; Exchange</p> <span class="svgicon svgicon-gd-more-grey product-intro__freeshipping-more"  ></span> </div>  <div class="product-intro__freeshipping-desc">
                 Learn More
@@ -263,34 +263,5 @@ if ($description)  :
                 $(".desction-right.description.info-desc").html("+");
             }
         })
-        setTimeout(function(){
-            $("#product-intro-fast-delivery").show();
-            $("#product-intro-free-return").show();
-        },5000);
     });
 </script>
-
-<div data-bind="mageInit: {
-        'Magento_Ui/js/modal/modal':{
-            'type': 'popup',
-            'title': '',
-            'trigger': '[data-trigger=trigger-freeshipping]',
-            'responsive': true,
-            'buttons' : []
-        }}">
-    <div class="content" style="display: none" id="product-intro-fast-delivery">
-        <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-fast-delivery')->toHtml();?>
-    </div>
-</div>
-<div data-bind="mageInit: {
-        'Magento_Ui/js/modal/modal':{
-            'type': 'popup',
-            'title': '',
-            'trigger': '[data-trigger=trigger-freeshipping-more]',
-            'responsive': true,
-            'buttons' : []
-        }}">
-    <div class="content" style="display: none" id="product-intro-free-return">
-        <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-free-return')->toHtml();?>
-    </div>
-</div>

app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/addtocart.phtml

@@ -63,6 +63,26 @@
         $("#wishlist").html($(".product-addto-links > div:first").html());
         /*open*/
         $('body').delegate('#product-intro__freeshipping-more-3', 'click', function(data) {
+            $("#size-chart").show();
+            if (isMobile()){
+                $(".lis").slideToggle("slow");
+            }else{
+                $("#areaMask").fadeIn();
+                $("#areaLayer").animate({"right": 0});
+            }
+        });
+
+        $('#free-return-button').click(function(data) {
+            $("#free-return").show();
+            if (isMobile()){
+                $(".lis").slideToggle("slow");
+            }else{
+                $("#areaMask").fadeIn();
+                $("#areaLayer").animate({"right": 0});
+            }
+        });
+        $('#freeshipping-button').click(function(data) {
+            $("#freeshipping").show();
             if (isMobile()){
                 $(".lis").slideToggle("slow");
             }else{
@@ -76,6 +96,9 @@
             $("#areaLayer").animate({"right": "-100%"});
             $('#remen').show();
             $(".lis").slideToggle("slow");
+            $("#free-return").hide();
+            $("#size-chart").hide();
+            $("#freeshipping").hide();
         }
 
         /*close*/
@@ -106,12 +129,21 @@
     <section id="areaLayer" class="express-area-box">
         <article id="areaBox">
             <ul class="remen" id="remen">
-                <li class="lastli lastli-left">Size Chart</li>
+                <li class="lastli lastli-left"></li>
                 <li class="lastli lastli-right" style="cursor:pointer">X</li>
             </ul>
             <div class="area-content">
+                <div id="size-chart" style="display: none;">
                     <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-size-chart')->toHtml();?>
                 </div>
+                <div  id="free-return" style="display: none;">
+                    <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-free-return')->toHtml();?>
+                </div>
+                <div id="freeshipping" style="display: none;">
+                    <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-fast-delivery')->toHtml();?>
+                </div>
+
+            </div>
             <ul id="areaList" class="area-list" style="margin-bottom: 500px;"></ul>
         </article>
     </section>