优化详情页面尺码弹出框效果

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

@@ -61,29 +61,62 @@
         'jquery'
     ], function ($) {
         $("#wishlist").html($(".product-addto-links > div:first").html());
-        setTimeout(function(){
-            if ($("div").hasClass("swatch-attribute size")){
-                var size = '<div  id="product-intro__freeshipping-more-3"  data-trigger="trigger">\n' +
-                    '        <a href="javascript:void(0);">Size Guide</a></span></div>';
-                $(".swatch-attribute.size > span:last").after(size);
+        /*open*/
+        $('body').delegate('#product-intro__freeshipping-more-3', 'click', function(data) {
+            if (isMobile()){
+                $(".lis").slideToggle("slow");
+            }else{
+                $("#areaMask").fadeIn();
+                $("#areaLayer").animate({"right": 0});
             }
-        },3000);
-    });
-</script>
+        });
 
-<div data-bind="mageInit: {
-        'Magento_Ui/js/modal/modal':{
-            'type': 'popup',
-            'title': '',
-            'trigger': '[data-trigger=trigger]',
-            'responsive': true,
-            'buttons' : []
-        }}">
-    <div class="content" id="product-intro-size-chart" style="display:none;">
-        <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-size-chart')->toHtml();?>
-    </div>
-</div>
+        function clockArea() {
+            $("#areaMask").fadeOut();
+            $("#areaLayer").animate({"right": "-100%"});
+            $('#remen').show();
+            $(".lis").slideToggle("slow");
+        }
+
+        /*close*/
+        $("#areaMask, #closeArea,.lastli-right").click(function() {
+            clockArea();
+        });
 
+        function isMobile() {
+            var userAgentInfo = navigator.userAgent;
+            var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
+            var mobile_flag = false;
+            for (var v = 0; v < mobileAgents.length; v++) {
+                if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
+                    mobile_flag = true;
+                    break;
+                }
+            }
+            var screen_width = window.screen.width;
+            var screen_height = window.screen.height;
+            if(screen_width < 500 && screen_height < 800){
+                mobile_flag = true;
+            }
+            return mobile_flag;
+        }
+    });
+</script>
+<li class="lis">
+    <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-right" style="cursor:pointer">X</li>
+            </ul>
+            <div class="area-content">
+                <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product-intro-size-chart')->toHtml();?>
+            </div>
+            <ul id="areaList" class="area-list" style="margin-bottom: 500px;"></ul>
+        </article>
+    </section>
+    <div id="areaMask" class="mask"></div>
+</li>
 <style>
     #product-intro__freeshipping-more-3{
         display: inline-block;
@@ -114,6 +147,35 @@
         #wishlist{
             display: none;
         }
+        .lis{
+            display: none;
+            width: 100%;
+			max-height: 60%;
+            height: auto;
+            background-color: #fff;
+			position: fixed;
+			left: 0px;
+			bottom: 0px;
+			z-index: 100;
+			padding: 5px;
+			display: list-item;
+            list-style: none;
+            box-shadow: 0px 0px 16px;
+        }
+        .lastli-right{
+                width: 20%;
+                display: inline;
+                float: right;
+                text-align: end;
+                margin-right: 10px;
+        }
+        .lastli-left{
+               display: inline;
+               width: 70%;
+                margin-left: 38%;
+                font-size: larger;
+                font-weight: 500;
+        }
     }
     @media (min-width: 780px) {
         #wishlist{
@@ -125,6 +187,23 @@
         .product-addto-links{
             display: none;
         }
+
+        .lastli-left{
+               font-size: larger;
+                font-weight: 700;
+                margin-left: 40%;
+        }
+        .remen li{text-align: justify;font-size: 16px;line-height: 44px; padding: 0 15px;}
+        .lastli{hheight:30px;float: left;}
+        .express-area-box { position: absolute; right: -100%; left: 50%; z-index: 120; width: 320px; margin-left: -160px; background-color: #fff; color: #4d525d; }
+        .express-area-box .top h3 {padding-left: 15px; font-size: 16px;background: #eeeeee;line-height: 44px;}
+        .lastli{text-align: center;font-size: 14px;line-height: 40px;}
+        .lastli-right{float:right !important;}
+        .express-area-box article {  overflow-y: scroll; }
+        .area-list li {padding: 0 15px; border-bottom: 1px solid #e2e2e2; text-align: justify; line-height: 44px}
+        .express-area-box { position: fixed; left:  inherit; width: min-content;height: 100%;right: -100%;top: 0; margin-left: 0;box-shadow: 0 0 20px rgba(0,0,0,1); }
+        .area-content{padding:10px;}
+        .mask { display: none; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); }
     }
 </style>
 <script>

app/design/frontend/Joshine/breeze/Magento_Swatches/web/js/swatch-renderer.js

@@ -424,11 +424,16 @@ define([
                 }
 
                 if ($widget.options.enableControlLabel) {
+                    var tem_size = '';
+                    if (item.label == "Size"){
+                        tem_size = "<div  id=\"product-intro__freeshipping-more-3\"  >" +
+                            "<a href=\"javascript:void(0);\">Size Guide</a></div>";
+                    }
                     label +=
                         '<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' +
                         $('<i></i>').text(item.label).html() +
                         '</span>' +
-                        '<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>';
+                        '<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>' + tem_size;
                 }
 
                 if ($widget.inProductList) {