最模板 - 外贸网站建设,外贸网站模板

最模板

当前位置: 首页 > 建站教程 > CMS教程 > ECShop教程 >

弹出层始终出现在屏幕中间的解决方案

时间:2014-06-10 11:03来源: 作者: 点击:
弹出层始终出现在屏幕中间可如下操作: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" htmlxmlns="http://www.w3.org/1999/xhtml" head metahttp-equiv="Conte
(责任编辑:admin)

弹出层始终出现在屏幕中间可如下操作:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.joinclub {

         width: 440px;

         height: 282px;

         border: 1px solid #6E665A;

         border-radius: 5px;

         background: #fff;

         padding-top: 10px;

         position: absolute;

         z-index: 99999999;

         display: none;

         left: 50%;/*FF IE7*/

         top: 50%;/*FF IE7*/

         margin-left: -220px!important;/*FF IE7 该值为本身宽的一半 */

         margin-top: -140px!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*/

}

.bg123 {

         background-color: #ccc;

         width: 100%;

         height: 100%;

         z-index: 99999998;

         left: 0;

         top: 0;/*FF IE7*/

         filter: alpha(opacity=50);/*IE*/

         opacity: 0.5;/*FF*/

         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*/

}

</style>

</head>

 

<body>

<div style="width:100%; height:500px; border:1px solid red"></div>

<a href="#" onclick="join_club()">点击我</a>

</body>

<div class="joinclub" id="joinclub" style="display:none">我是弹出菜单<input type="button" value="关闭我" onclick="closeCustomer()" /></div>

<div id="bg123" class="bg123" style="display:none;"></div>

<script type="text/javascript">

function closeCustomer(){

         document.getElementById("joinclub").style.display='none';

         document.getElementById("bg123").style.display='none';

         }

function join_club()

{

         document.getElementById('joinclub').style.display = 'block';

         document.getElementById('bg123').style.display = 'block';

}

</script>

</html>

  

------分隔线----------------------------
栏目列表
推荐内容