modal-showimg.html 3.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <style type="text/css">
  2. /*图片列表*/
  3. .img-list {
  4. display: flex;
  5. text-align: center;
  6. flex-direction: row;
  7. flex-wrap: wrap;
  8. }
  9. .img-list .img-item {
  10. width: 20%;
  11. position: relative;
  12. }
  13. .img-list .img-item img {
  14. padding: 0px;
  15. height: 100px;
  16. width: 100px;
  17. cursor: pointer;
  18. border-radius: 14px;
  19. }
  20. </style>
  21. <div class="img-list">
  22. <div class="img-item" ng-repeat="it in imgList" style="width:{{width+20}}px;">
  23. <div style="padding:5px 10px;">
  24. <img ng-if="it.success" style="width:{{width}}px;height:{{height}}px;margin: 5px 0;cursor: pointer;"
  25. ng-src="{{it.blobUrl}}"
  26. data-toggle="modal"
  27. data-target="#{{modalId}}" ng-click="showImg($index)" onerror="this.src='images/default.png'" />
  28. <img ng-if="!it.success" style="width:{{width}}px;height:{{height}}px;margin: 5px 0;cursor: pointer;"
  29. src="images/default.png" />
  30. <i ng-if="!readonly" class="material-icons remove-icon"
  31. ng-click="deleteImg(it.AttachmentId)">remove_circle_outline</i>
  32. </div>
  33. </div>
  34. <i ng-if="!readonly && (ismulti || (!ismulti && imgList.length==0))" class="material-icons dj-add"
  35. ng-class="imgList.length>0?'dj-add-pd':''"
  36. ng-click="uploadImg()">add_circle_outline</i>
  37. <div ng-if="imgList.length==0 && readonly==true" style="padding: 10px;">
  38. 暂无图片
  39. </div>
  40. </div>
  41. <!-- 查看大图-->
  42. <div class="modal fade text-center" id="{{modalId}}" tabindex="-1" role="dialog">
  43. <div class="modal-dialog bigimg-modal">
  44. <div class="card">
  45. <div class="header">
  46. <div class="btn-tool" style="float: left !important;margin: 12px;">
  47. <button class="close" ng-click="up()" ng-if="showIndex>0" style="padding-right: 10px;">
  48. 上一张
  49. </button>
  50. <button class="close" ng-click="next()" ng-if="showIndex<(imgList.length-1)">
  51. 下一张
  52. </button>
  53. </div>
  54. <!--<div class="btn-tool" style="float: left !important;margin: 12px;">
  55. <button class="close" ng-click="zoomIn()" style="padding-right: 10px;">
  56. <span class="glyphicon glyphicon-zoom-in btn-refresh-icon"></span>
  57. </button>
  58. <button class="close" ng-click="zoomOut()" style="padding-right: 10px;">
  59. <span class="glyphicon glyphicon-zoom-out btn-refresh-icon"></span>
  60. </button>
  61. <button class="close" ng-click="img.rotate=img.rotate+90">
  62. <span class="glyphicon glyphicon-repeat btn-refresh-icon"></span>
  63. </button>
  64. </div>-->
  65. <div class="btn-tool">
  66. <button type="button" class="close btn-close"
  67. data-dismiss="modal">
  68. &times;
  69. </button>
  70. </div>
  71. </div>
  72. <div class="body" style="overflow: auto;display:block;margin: 50px;">
  73. <div ng-if="img.isload" style="transform:scale({{img.scale}});">
  74. <img ng-src="{{img.url}}"
  75. style="max-width: 100%;transform:rotate({{img.rotate}}deg);-webkit-transform:rotate({{img.rotate}}deg);-moz-transform:rotate({{img.rotate}}deg);"
  76. ng-click="img.rotate=img.rotate+90" />
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>