提醒以及全屏透明黑



  1. var index = 0;
  2. var maindombody;
  3. var jsonsize;
  4. var contenthight;
  5. var hidebottom;
  6. var speed = 500;
  7. var topdombody;
  8. var leftdombody;
  9. var tipspop;
  10. function dotips(){
  11. leftdombody= $('body',window.frames["leftFrame"].document);
  12. topdombody=$('body',window.frames["topFrame"].document);
  13. maindombody=$('body',window.frames["mainFrame"].document);
  14. setTimeout(function(){
  15. tipspop = new TipsPop();
  16. },1000)
  17. }
  18. function TipsPop(){
  19. if(tipsJson.length<=0){
  20. return;
  21. }
  22. this.init();
  23. if(index == 0){
  24. setTimeout(function(){
  25. TipsPop.prototype.showTipsPop();
  26. },500);
  27. }
  28. index ++;
  29. return this;
  30. }
  31. TipsPop.prototype={
  32. init:function(){
  33. jsonsize = tipsJson.length;
  34. if(jsonsize>5){
  35. jsonsize=5;
  36. }
  37. contenthight = 100 * jsonsize;
  38. hidebottom = contenthight+10;
  39. if(typeof($("#supplytips",maindombody).html()) != "undefined" || $("#supplytips",maindombody).html() != null){
  40. return;
  41. }
  42. $(maindombody).append('<div id="fade"></div>');
  43. $("#fade",maindombody).css({'display':'none','background' : '#000','position':'fixed','top':'0','left':'0','width':'100%','height':'100%','opacity':'.80','z-index':'9999'});
  44. $(topdombody).append('<div id="fade"></div>');
  45. $("#fade",topdombody).css({'display':'none','background' : '#000','position':'fixed','top':'0','left':'0','width':'100%','height':'100%','opacity':'.80','z-index':'9999'});
  46. $(leftdombody).append('<div id="fade"></div>');
  47. $("#fade",leftdombody).css({'display':'none','background' : '#000','position':'fixed','top':'0','left':'0','width':'100%','height':'100%','opacity':'.80','z-index':'9999'});
  48. $(maindombody).append('<div id="supplytips"></div>');
  49. $("#supplytips",maindombody).css({
  50. 'padding':'5px'
  51. ,'position': 'fixed'
  52. ,'width': '250px'
  53. ,'bottom':'-'+hidebottom+'px'
  54. ,'z-index': '99999'
  55. ,'right': '1%'
  56. ,'background': 'white'
  57. ,'box-shadow': '0px 0px 20px #FFFFFF'
  58. ,'border-radius': '10px'
  59. ,'behavior': 'url(ie-css3.htc)'
  60. })
  61. $("#supplytips",maindombody).append('<div id="lm_bg" style="border-radius: 10px;behavior: url(ie-css3.htc);text-align: center;line-height: 35px">'+
  62. '<b style="font-size: 15px;font-family: 微软雅黑">货源提醒</b>'+
  63. '</div>');
  64. var jsonHtmlStr = '<div style="99%;height:'+contenthight+'px;overflow:scroll;overflow-x:hidden;margin-top:10px;">';
  65. $(tipsJson).each(function(){
  66. jsonHtmlStr += '<p title="'+this.Content+'" style="padding: 5px 10px 5px 10px;font-size: 13px;word-break:break-all;border- 0;height:60px;">';
  67. jsonHtmlStr +=this.Content;
  68. jsonHtmlStr +='<hr style="display: block;padding: 0px;border-color:#a2c6de ;border-bottom-style : solid;border- 0 0 1px;"/></p>';
  69. })
  70. jsonHtmlStr += '</div>';
  71. $("#supplytips",maindombody).append(jsonHtmlStr);
  72. maindombody.click(function(){
  73. TipsPop.prototype.removeTipsPop();
  74. })
  75. topdombody.click(function(){
  76. TipsPop.prototype.removeTipsPop();
  77. })
  78. leftdombody.click(function(){
  79. TipsPop.prototype.removeTipsPop();
  80. })
  81. $("#supplytips",maindombody).click(function(event){
  82. event.stopPropagation();
  83. })
  84. $("#supplytips",maindombody).mouseover(function(){
  85. TipsPop.prototype.showTipsPop();
  86. })
  87. }
  88. ,
  89. showTipsPop:function(){
  90. if($("#supplytips",maindombody).css('bottom')=='-'+hidebottom+'px'){
  91. $('#fade',maindombody).css({'filter' : 'alpha(opacity=80)'}).fadeIn(speed);
  92. $('#fade',topdombody).css({'filter' : 'alpha(opacity=80)'}).fadeIn(speed);
  93. $('#fade',leftdombody).css({'filter' : 'alpha(opacity=80)'}).fadeIn(speed);
  94. $("#supplytips",maindombody).animate({bottom: 0}, speed);
  95. }
  96. },
  97. removeTipsPop:function(){
  98. if($("#supplytips",maindombody).css('bottom')=='0px'){
  99. $('#fade',topdombody).fadeOut(speed);
  100. $('#fade',maindombody).fadeOut(speed);
  101. $('#fade',leftdombody).fadeOut(speed);
  102. $("#supplytips",maindombody).animate({bottom: -hidebottom}, speed);
  103. }
  104. }
  105. }

原文地址:https://www.cnblogs.com/signheart/p/6598157.html