task 43078 图片放大

infoport/discussionsDetail_01.html

@@ -93,6 +93,10 @@
 
         </div>
 
+        <div id="dialogOp" style="display: none;width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;">
+            <div onclick="closeDia()" style="width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;background: rgba(0,0,0,.5);"></div>
+            <img src="" id="dialogImg" style="position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);height: 50vh;" alt=""/>
+        </div>
 
     </div>
 </body>

infoport/discussionsDetail_02.html

@@ -100,6 +100,11 @@
         </div>
 
 
+        <div id="dialogOp" style="display: none;width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;">
+            <div onclick="closeDia()" style="width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;background: rgba(0,0,0,.5);"></div>
+            <img src="" id="dialogImg" style="position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);height: 50vh;" alt=""/>
+        </div>
+
     </div>
 </body>
 <script src="./static/js/common/require.js" data-main="./static/js/common/main.js?t=101" id="require-page" target-module="./static/js/project/discussionsDetail_02.js" defer type="text/javascript"></script>

infoport/discussionsDetail_03.html

@@ -94,6 +94,11 @@
         </div>
 
 
+        <div id="dialogOp" style="display: none;width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;">
+            <div onclick="closeDia()" style="width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;background: rgba(0,0,0,.5);"></div>
+            <img src="" id="dialogImg" style="position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);height: 50vh;" alt=""/>
+        </div>
+
     </div>
 </body>
 <script src="./static/js/common/require.js" data-main="./static/js/common/main.js?t=101" id="require-page" target-module="./static/js/project/discussionsDetail_03.js" defer type="text/javascript"></script>

infoport/static/js/project/discussionsDetail_01.js

@@ -65,7 +65,7 @@ define(['jquery', "template", "Tools"], function ($, template, Tools) {
             if (content.openPic){
                 let arr = content.openPic.split(',');
                 for (let i = 0;i < arr.length; i++){
-                    $('#jueyiPic')[0].innerHTML += '<img src="/api'+arr[i]+'" style="width: 200px;height: 150px;margin-right: 10px;">';
+                    $('#jueyiPic')[0].innerHTML += '<img onclick="openDialog(\'/api'+arr[i]+'\')" src="/api'+arr[i]+'" style="width: 200px;height: 150px;margin-right: 10px;">';
                 }
             }
 
@@ -83,6 +83,16 @@ define(['jquery', "template", "Tools"], function ($, template, Tools) {
         }
     }
 
+    openDialog = function (src){
+        $("#dialogOp").css('display','block');
+        $('#dialogImg').attr('src', src);
+    }
+
+    closeDia = function (){
+        $("#dialogOp").css('display','none');
+        $('#dialogImg').attr('src', '');
+    }
+
     module.newsList = function (data) {
         if (data.code == 200) {
             var content = data.rows;

infoport/static/js/project/discussionsDetail_03.js

@@ -65,7 +65,7 @@ define(['jquery', "template", "Tools"], function ($, template, Tools) {
             if (content.openPic){
                 let arr = content.openPic.split(',');
                 for (let i = 0;i < arr.length; i++){
-                    $('#openPic')[0].innerHTML += '<img src="/api'+arr[i]+'" style="width: 200px;height: 150px;margin-right: 10px;">';
+                    $('#openPic')[0].innerHTML += '<img onclick="openDialog(\'/api'+arr[i]+'\')" src="/api'+arr[i]+'" style="width: 200px;height: 150px;margin-right: 10px;">';
                 }
             }
 
@@ -84,6 +84,16 @@ define(['jquery', "template", "Tools"], function ($, template, Tools) {
         }
     }
 
+    openDialog = function (src){
+        $("#dialogOp").css('display','block');
+        $('#dialogImg').attr('src', src);
+    }
+
+    closeDia = function (){
+        $("#dialogOp").css('display','none');
+        $('#dialogImg').attr('src', '');
+    }
+
     module.newsList = function (data) {
         if (data.code == 200) {
             var content = data.rows;