js_css_兼容浏览器的居中弹出层
修改收藏了一些
DEMO1 (推荐):
- <title>js_css_兼容浏览器的居中弹出层</title>
- <style type="text/css">
- <!--
- html,body {height:100%; margin:0px; font-size:12px;}
- .mydiv {
- background-color: #FFCC66;
- border: 1px solid #f00;
- text-align: center;
- line-height: 40px;
- font-size: 12px;
- font-weight: bold;
- z-index:999;
- width: 300px;
- height: 120px;
- left:50%;
- top:50%;
- margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
- margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
- margin-top:0px;
- position:fixed!important;/* FF IE7*/
- position:absolute;/*IE6*/
- _top: expression(eval(document.compatMode &&
- document.compatMode=='CSS1Compat') ?
- documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
- document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
- }
- .bg,.popIframe {
- background:#ecc; display:none;
- width: 100%;
- height: 100%;
- left:0;
- top:0;/*FF IE7*/
- filter:alpha(opacity=50);/*IE*/
- opacity:0.5;/*FF*/
- z-index:1;
- position:fixed!important;/*FF IE7*/
- position:absolute;/*IE6*/
- _top: expression(eval(document.compatMode &&
- document.compatMode=='CSS1Compat') ?
- documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
- document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
- }
- .popIframe {
- filter:alpha(opacity=0);/*IE*/
- opacity:0;/*FF*/
- }
- -->
- </style>
- <script language="javascript" type="text/javascript">
- function showDiv(){
- document.getElementById('popDiv').style.display='block';
- document.getElementById('popIframe').style.display='block';
- document.getElementById('bg').style.display='block';
- }
- function closeDiv(){
- document.getElementById('popDiv').style.display='none';
- document.getElementById('bg').style.display='none';
- document.getElementById('popIframe').style.display='none';
- }
- </script>
- </head>
- <body>
- <div id="popDiv" class="mydiv" style="display:none;">网页设计大本营欢迎你!<br/>Q群号:29032448<br/>
- <a href="javascript:closeDiv()">关闭窗口</a></div>
- <div id="bg" class="bg" style="display:none;"></div>
- <a href="javascript:showDiv()">点击这里弹出层</a>
- <iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
- </body>
- </html>
DEMO2:
- <title>jquery弹出层</title>
- <script type="text/javascript" src="jquery-1.3.2.js"></script>
- <style type="text/css">
- #dialog-overlay {
- width:100%;
- height:100%;
- filter:alpha(opacity=50);
- -moz-opacity:0.5;
- -khtml-opacity: 0.5;
- opacity: 0.5;
- position:absolute;
- background:#000;
- top:0; left:0;
- z-index:3000;
- display:none;
- }
- #dialog-box {
- -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
- -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- background:#eee;
- width:328px;
- position:absolute;
- z-index:5000;
- display:none;
- }
- #dialog-box .dialog-content {
- text-align:left;
- padding:10px;
- margin:13px;
- color:#666;
- font-family:arial;
- font-size:11px;
- }
- a.button {
- margin:10px auto 0 auto;
- text-align:center;
- background-color: #e33100;
- display: block;
- width:50px;
- padding: 5px 10px 6px;
- color: #fff;
- text-decoration: none;
- font-weight: bold;
- line-height: 1;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
- -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
- text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
- border-bottom: 1px solid rgba(0,0,0,0.25);
- position: relative;
- cursor: pointer;
- }
- a.button:hover {
- background-color: #c33100;
- }
- #dialog-box .dialog-content p {
- font-weight:700; margin:0;
- }
- #dialog-box .dialog-content ul {
- margin:10px 0 10px 20px;
- padding:0;
- height:50px;
- }
- </style>
- <script type="text/javascript">
- $(document).ready(function () {
- $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {
- $('#dialog-overlay, #dialog-box').hide();
- return false;
- });
- $(window).resize(function () {
- if (!$('#dialog-box').is(':hidden')) popup();
- });
- });
- //Popup dialog
- function popup(message) {
- var maskHeight = $(document).height();
- var maskWidth = $(window).width();
- var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
- var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
- $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
- $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
- $('#dialog-message').html(message);
- }
- </script>
- </head>
- <body>
- <a href="javascript:popup('网站运营、软件应用、设计教程、编程开发与IT资讯等内容,同时有×××、站长工具、在线手册、免费资源等内容,是国内快捷易懂、内容丰富的网上学习网站。')">猛击此处,弹出层!</a>
- <div id="dialog-overlay"></div>
- <div id="dialog-box">
- <div class="dialog-content">
- <div id="dialog-message"></div>
- <a href="#" class="button">关闭</a>
- </div>
- </div>
- </body>
- </html>
DEMO3 (推荐):
- <title>jquery 弹出层固定居中</title>
- <style type="text/css">
- body {
- font-family:Arial, Helvetica, sans-serif;
- font-size:12px;
- margin:0;
- }
- #main {
- height:1800px;
- padding-top:90px;
- text-align:center;
- }
- #fullbg {
- background-color:Gray;
- left:0px;
- opacity:0.5;
- position:absolute;
- top:0px;
- z-index:3;
- filter:alpha(opacity=50); /* IE6 */
- -moz-opacity:0.5; /* Mozilla */
- -khtml-opacity:0.5; /* Safari */
- }
- #dialog {
- background-color:#FFF;
- border:1px solid #888;
- display:none;
- height:200px;
- left:50%;
- margin:-100px 0 0 -100px;
- padding:12px;
- position:fixed !important; /* 浮动对话框 */
- position:absolute;
- top:50%;
- width:200px;
- z-index:5;
- }
- #dialog p {
- margin:0 0 12px;
- }
- #dialog p.close {
- text-align:right;
- }
- </style>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
- <script type="text/javascript">
- //显示灰色 jQuery 遮罩层
- function showBg() {
- var bh = $("body").height();
- var bw = $("body").width();
- $("#fullbg").css({
- height:bh,
- width:bw,
- display:"block"
- });
- $("#dialog").show();
- }
- //关闭灰色 jQuery 遮罩
- function closeBg() {
- $("#fullbg,#dialog").hide();
- }
- </script>
- <!--[if lte IE 6]>
- <script type="text/javascript">
- // 浮动对话框
- $(document).ready(function() {
- var domThis = $('#dialog')[0];
- var wh = $(window).height() / 2;
- $("body").css({
- "background-p_w_picpath": "url(about:blank)",
- "background-p_w_upload": "fixed"
- });
- domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"');
- });
- </script>
- <![endif]-->
- </head>
- <body>
- <div id="main"> <a href="#" onclick="showBg();">点击这里看 jQuery 遮罩层效果.</a> </div>
- <!-- jQuery 遮罩层 -->
- <div id="fullbg"></div>
- <!-- end jQuery 遮罩层 -->
- <!-- 对话框 -->
- <div id="dialog">
- <p class="close"><a href="#" onclick="closeBg();">关闭</a></p>
- <p>正在加载,请稍后...</p>
- </div>
- <!-- jQuery 遮罩层上方的对话框 -->
- </body>
- </html>