新媒体矩阵样式

nngkxxdp/src/main/resources/static/xmtjz/index.html

@@ -122,7 +122,7 @@
     </ul>
     <div id="tab1" class="list" style="display: block">
         <div style="width: 1394px;position: relative;padding-bottom: 30px">
-            <div id="messageDialogT" class="message" style="display:none;position: absolute;z-index: 11;">
+            <div id="messageDialogT" class="message" tabindex="1" onblur="closeDialog()" style="display:none;position: absolute;z-index: 11;">
                 <div id="messageDialog"></div>
                 <div id="messageArrow" style="top: 175px" class="arrow"></div>
             </div>
@@ -458,13 +458,28 @@
             departments();
         }
     });
+    function closeDialog(){
+        var tapsTitleLi = $('.third .list .wxInfo');
+        {
+            for (var i = 0; i < tapsTitleLi.length; i++) {
+                tapsTitleLi[i].classList = ['wxInfo'];
+            }
+            $("#messageDialogT").css("display", "none")
+        }
+    }
     function openDetail(index, name) {
+        // $("#messageDialogT").addEventListener('keydown', (e) => {
+        //     if(e.keyCode == 9){ // 禁用tab按键
+        //         e.preventDefault();
+        //     }
+        // });
         var tapsTitleLi = $('.third .list .wxInfo');
         var left = index % 6;
         var top = parseInt(index / 6);
         if ($("#messageDialogT").css("display") == 'none') {
             tapsTitleLi[index].classList = ['wxInfo click'];
             $("#messageDialogT").addClass("click");
+            $("#messageDialogT").focus();
             $("#messageDialogT").css("display", "block");
             $("#messageDialogT").css("top", (top*200) + "px");
             $("#messageDialogT").css("left", (250 + left*220) + "px");