jquery_css_兼容瀏覽器的居中彈出層

原創 lai堅 2018-09-12 02:32

js_css_兼容瀏覽器的居中彈出層
修改收藏了一些

DEMO1 (推薦):
 

  1. <title>js_css_兼容瀏覽器的居中彈出層</title>   
  2. <style type="text/css">   
  3. <!--   
  4. html,body {height:100%; margin:0px; font-size:12px;}   
  5. .mydiv {   
  6. background-color: #FFCC66;   
  7. border: 1px solid #f00;   
  8. text-align: center;   
  9. line-height: 40px;   
  10. font-size: 12px;   
  11. font-weight: bold;   
  12. z-index:999;   
  13. width: 300px;   
  14. height: 120px;   
  15. left:50%;   
  16. top:50%;   
  17. margin-left:-150px!important;/*FF IE7 該值爲本身寬的一半 */   
  18. margin-top:-60px!important;/*FF IE7 該值爲本身高的一半*/   
  19. margin-top:0px;   
  20. position:fixed!important;/* FF IE7*/   
  21. position:absolute;/*IE6*/   
  22. _top:       expression(eval(document.compatMode &&   
  23.             document.compatMode=='CSS1Compat') ?   
  24.             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/   
  25.             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/   
  26. }   
  27. .bg,.popIframe {   
  28. background:#ecc; display:none;   
  29. width: 100%;   
  30. height: 100%;   
  31. left:0;   
  32. top:0;/*FF IE7*/   
  33. filter:alpha(opacity=50);/*IE*/   
  34. opacity:0.5;/*FF*/   
  35. z-index:1;   
  36. position:fixed!important;/*FF IE7*/   
  37. position:absolute;/*IE6*/   
  38. _top:       expression(eval(document.compatMode &&   
  39.             document.compatMode=='CSS1Compat') ?   
  40.             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/   
  41.             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);   
  42. }   
  43. .popIframe {   
  44. filter:alpha(opacity=0);/*IE*/   
  45. opacity:0;/*FF*/   
  46. }   
  47. -->   
  48. </style>   
  49. <script language="javascript" type="text/javascript">   
  50. function showDiv(){   
  51. document.getElementById('popDiv').style.display='block';   
  52. document.getElementById('popIframe').style.display='block';   
  53. document.getElementById('bg').style.display='block';   
  54. }   
  55. function closeDiv(){   
  56. document.getElementById('popDiv').style.display='none';   
  57. document.getElementById('bg').style.display='none';   
  58. document.getElementById('popIframe').style.display='none';   
  59. }   
  60. </script>   
  61. </head>   
  62. <body>   
  63. <div id="popDiv" class="mydiv" style="display:none;">網頁設計大本營歡迎你！<br/>Q羣號:29032448<br/>   
  64. <a href="javascript:closeDiv()">關閉窗口</a></div>   
  65. <div id="bg" class="bg" style="display:none;"></div>   
  66. <a href="javascript:showDiv()">點擊這裏彈出層</a>   
  67. <iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>   
  68. </body>   
  69. </html>

DEMO2:
 

  1. <title>jquery彈出層</title>   
  2. <script type="text/javascript" src="jquery-1.3.2.js"></script>   
  3. <style type="text/css">   
  4. #dialog-overlay {   
  5.     width:100%;   
  6.     height:100%;   
  7.     filter:alpha(opacity=50);   
  8.     -moz-opacity:0.5;   
  9.     -khtml-opacity: 0.5;   
  10.     opacity: 0.5;   
  11.     position:absolute;   
  12.     background:#000;   
  13.     top:0; left:0;   
  14.     z-index:3000;   
  15.     display:none;   
  16. }   
  17. #dialog-box {   
  18.     -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);   
  19.     -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);   
  20.     -moz-border-radius: 5px;   
  21.     -webkit-border-radius: 5px;   
  22.       
  23.     background:#eee;   
  24.     width:328px;   
  25.     position:absolute;   
  26.     z-index:5000;   
  27.     display:none;   
  28. }   
  29. #dialog-box .dialog-content {   
  30.     text-align:left;   
  31.     padding:10px;   
  32.     margin:13px;   
  33.     color:#666;   
  34.     font-family:arial;   
  35.     font-size:11px;   
  36. }   
  37. a.button {   
  38.     margin:10px auto 0 auto;   
  39.     text-align:center;   
  40.     background-color: #e33100;   
  41.     display: block;   
  42.     width:50px;   
  43.     padding: 5px 10px 6px;   
  44.     color: #fff;   
  45.     text-decoration: none;   
  46.     font-weight: bold;   
  47.     line-height: 1;   
  48.     -moz-border-radius: 5px;   
  49.     -webkit-border-radius: 5px;   
  50.     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);   
  51.     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);   
  52.     text-shadow: 0 -1px 1px rgba(0,0,0,0.25);   
  53.     border-bottom: 1px solid rgba(0,0,0,0.25);   
  54.     position: relative;   
  55.     cursor: pointer;   
  56.       
  57. }   
  58. a.button:hover {   
  59.     background-color: #c33100;      
  60. }   
  61. #dialog-box .dialog-content p {   
  62.     font-weight:700; margin:0;   
  63. }   
  64. #dialog-box .dialog-content ul {   
  65.     margin:10px 0 10px 20px;   
  66.     padding:0;   
  67.     height:50px;   
  68. }   
  69. </style>   
  70. <script type="text/javascript">   
  71. $(document).ready(function () {   
  72.     $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {          
  73.         $('#dialog-overlay, #dialog-box').hide();          
  74.         return false;   
  75.     });   
  76.     $(window).resize(function () {   
  77.         if (!$('#dialog-box').is(':hidden')) popup();          
  78.     });      
  79.       
  80.       
  81. });   
  82. //Popup dialog   
  83. function popup(message) {   
  84.     var maskHeight = $(document).height();    
  85.     var maskWidth = $(window).width();   
  86.     var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());    
  87.     var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);   
  88.     $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();   
  89.     $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();   
  90.     $('#dialog-message').html(message);   
  91.               
  92. }   
  93. </script>   
  94. </head>   
  95. <body>   
  96. <a href="javascript:popup('網站運營、軟件應用、設計教程、編程開發與IT資訊等內容，同時有源碼下載、站長工具、在線手冊、免費資源等內容，是國內快捷易懂、內容豐富的網上學習網站。')">猛擊此處，彈出層!</a>   
  97. <div id="dialog-overlay"></div>   
  98. <div id="dialog-box">   
  99.     <div class="dialog-content">   
  100.         <div id="dialog-message"></div>   
  101.         <a href="#" class="button">關閉</a>   
  102.     </div>   
  103. </div>   
  104. </body>   
  105. </html>   
  106.  

 

 

DEMO3 (推薦):

 

  1. <title>jquery 彈出層固定居中</title>   
  2. <style type="text/css">   
  3. body {   
  4.     font-family:Arial, Helvetica, sans-serif;   
  5.     font-size:12px;   
  6.     margin:0;   
  7. }   
  8. #main {   
  9.     height:1800px;   
  10.     padding-top:90px;   
  11.     text-align:center;   
  12. }   
  13. #fullbg {   
  14.     background-color:Gray;   
  15.     left:0px;   
  16.     opacity:0.5;   
  17.     position:absolute;   
  18.     top:0px;   
  19.     z-index:3;   
  20.     filter:alpha(opacity=50); /* IE6 */   
  21.     -moz-opacity:0.5; /* Mozilla */   
  22.     -khtml-opacity:0.5; /* Safari */   
  23. }   
  24. #dialog {   
  25.     background-color:#FFF;   
  26.     border:1px solid #888;   
  27.     display:none;   
  28.     height:200px;   
  29.     left:50%;   
  30.     margin:-100px 0 0 -100px;   
  31.     padding:12px;   
  32.     position:fixed !important; /* 浮動對話框 */   
  33.     position:absolute;   
  34.     top:50%;   
  35.     width:200px;   
  36.     z-index:5;   
  37. }   
  38. #dialog p {   
  39.     margin:0 0 12px;   
  40. }   
  41. #dialog p.close {   
  42.     text-align:right;   
  43. }   
  44. </style>   
  45. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>   
  46. <script type="text/javascript">   
  47. //顯示灰色 jQuery 遮罩層   
  48. function showBg() {   
  49.     var bh = $("body").height();   
  50.     var bw = $("body").width();   
  51.     $("#fullbg").css({   
  52.         height:bh,   
  53.         width:bw,   
  54.         display:"block"   
  55.     });   
  56.     $("#dialog").show();   
  57. }   
  58. //關閉灰色 jQuery 遮罩   
  59. function closeBg() {   
  60.     $("#fullbg,#dialog").hide();   
  61. }   
  62. </script>   
  63. <!--[if lte IE 6]>   
  64. <script type="text/javascript">   
  65. // 浮動對話框   
  66. $(document).ready(function() {   
  67.     var domThis = $('#dialog')[0];   
  68.     var wh = $(window).height() / 2;   
  69.     $("body").css({   
  70.         "background-image": "url(about:blank)",   
  71.         "background-attachment": "fixed"   
  72.     });   
  73.     domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"');   
  74. });   
  75. </script>   
  76. <![endif]-->   
  77. </head>   
  78. <body>   
  79. <div id="main"> <a href="#" onclick="showBg();">點擊這裏看 jQuery 遮罩層效果.</a> </div>   
  80. <!-- jQuery 遮罩層 -->   
  81. <div id="fullbg"></div>   
  82. <!-- end jQuery 遮罩層 -->   
  83. <!-- 對話框 -->   
  84. <div id="dialog">   
  85.   <p class="close"><a href="#" onclick="closeBg();">關閉</a></p>   
  86.   <p>正在加載，請稍後...</p>   
  87. </div>   
  88. <!-- jQuery 遮罩層上方的對話框 -->   
  89. </body>   
  90. </html>   
  91.  

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

如何讓wp7真機調試時候保持屏幕高亮不鎖屏

sxchao2008 2019-02-22 20:21:15

Android屏幕點亮(常亮)及屏幕解鎖和鎖定

孫國威 2019-02-22 20:13:09

Techsmith Camtasia Studio V5.0.2

bohai123456 2019-02-22 19:29:59

不開屏幕而能“靜默”安裝Windows XP的步驟

Jon_Suo 2019-02-22 18:15:47

什麼是SysWow64

superpopb2b 2019-02-23 00:34:51

搜狗瀏覽器功能規劃評析

吾卻南飛 2019-02-23 00:25:02

兩個路由器兼容

ctotech 2019-02-22 22:06:07

兼容

outsider96 2019-02-22 20:35:38

JDK版本不兼容問題之：一臺機器安裝多個版本的JDK

guojie 2019-02-22 20:17:39

[轉]CSS完美兼容IE6/IE7/FF的通用方法

fangdaren 2019-02-22 20:07:38

如何編寫兼容各主流郵箱的HTML郵件

abao0918 2019-02-22 19:58:08

Whatever:hover – 無需javascript讓IE支持豐富僞類

李武洪 2019-02-22 19:27:47

daily news新聞閱讀客戶端應用源碼(兼容iPhone和iPad)

tianlongbamu 2019-02-22 18:47:13

如何使div中的內容上下左右居中？

吾墨 2019-02-22 22:51:38

css背景圖片的設置

lh04667649 2019-02-22 18:50:09