Question

当用户点击表格中的徽标时，我们会显示居中的弹出窗口。一切正常，除了......

屏幕中心的标识（弹出窗口所在的位置）不起作用，
我们需要在每个弹出窗口上关闭一个按钮。

这是我们到目前为止所做的：

<style type="text/css">
.main55{
position: fixed;
TOP:50%;
LEFT:50%;
width:400px;
height: 400px;
margin-top:-200px;
margin-left:-200px;

}
.menu0{ clear:both;

}
.menu0 div{
    cursor:pointer;
}

#main0 div{ 
display: none; 
}
#main0 div.block{ 
display: block;     
}
</style>


<script>
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("div");
var mli=document.getElementById("main"+m).getElementsByTagName("div");
for(i=0;i<tli.length;i++){
   tli[i].className=i==n?"hover":"";
   mli[i].style.display=i==n?"block":"none";
}
}
</script>


<!-----------------------table with LOGOS as menu items------------------------->

<div class="menu0" id="menu0">

<table  border=0 bordercolor=red width=900>

<td align=center valign=center width=180 height=200  background=frame55.gif   >
    <div onclick="setTab(0,1)">
    LOGO1
    </div>
</td>

<td align=center valign=center width=180 height=200 background=frame55.gif   >
    <div onclick="setTab(0,2)">
    LOGO2
    </div>
</td>

<td align=center valign=center width=180 height=200    background=frame55.gif   >
    <div onclick="setTab(0,3)">
    LOGO3
    </div>
</td>

<td align=center valign=center width=180 height=200    background=frame55.gif   >
    <div onclick="setTab(0,4)">
    LOGO4
    </div>
</td>

<td align=center valign=center width=180 height=200    background=frame55.gif   >
    <div onclick="setTab(0,5)">
    LOGO5  
    </div>
</td>
 </table>
</div>


<!-----------------DIVS WITH INFO TO POPUP--------------------->

<div class="main55" id="main0">

<div >
    <table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
    <td align=center>
     INFO1
    </td>
    </table>
</div>

<div >
    <table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
    <td align=center>
     INFO2
    </td>
    </table>
</div>

<div >
    <table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
    <td align=center>
     INFO3
    </td>
    </table>
</div>

<div >
    <table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
    <td align=center>
     INFO4
    </td>
    </table>
</div>

 <div >
    <table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
    <td align=center>
     INFO5
    </td>
    </table>
</div>

</DIV>

Answer 1

你的HTML是复杂的尝试这可能是你想要的吗？

 <p>May be you want this?  <a href = "javascript:void(0)" onclick = "showpopup();">here</a></p>
        <div id="light" class="white_content">This is the popup content. <a href = "javascript:void(0)" onclick = "hidepopup();">Close</a></div>
        <div id="fade" class="black_overlay"></div>

JS

  function showpopup () {
       document.getElementById('light').style.display='block';
       document.getElementById('fade').style.display='block';
   }
   function hidepopup () {
       document.getElementById('light').style.display='none';
       document.getElementById('fade').style.display='none';
   }

CSS For Centered ligthbox

 .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }

n用于灯箱效果的黑色叠加的CSS

.black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }

jsbin

关闭DIV弹出窗口

1 个答案: