随手做的一个模拟弹出窗口

CSS

 

#cover_div{
position: absolute;
z-index: 999999;
width: 100%;
height: 100%;
display: none;
left: 0;
top: 0;
min-width: 700px;
min-height: 740px;      
opacity: 0.01;
filter: alpha(opacity = 1);
background-color: #fff; display: none;}
#id_messages{
height: 70px;
padding: 0px 0px 0px 25px;
margin-bottom: 0px;
width: 240px;
border-radius: 5px;
background-color: #FFF;
position: absolute;
z-index: 9999999;
left: 50%;
margin-left: -120px;
top: 40%;
border: 1px solid #6699CC;
height /*\**/: 70px\9;
display: none;
}
#b_txt{
color: #fff;
background-color: #6699CC;
margin-top: -25px;
padding-left: 25px;
display: block;
margin-left: -26px;
width: 100%;
height: 25px;
border-radius: 5px;
border: 1px solid grey;}
 
#td_btn{
width: 60px;
height: 60px;
}

HTML（建议放在最外层仅仅被body标签包裹）

 

<input type="button" onclick="show()"   value="test"/>
 
<div id="cover_div"></div>
 <div id="id_messages">
    <b id="b_txt">请输入用户名</b>
  <table>
   <tr>
    <td><input type="text" placeholder="请输入用户名"/></td>
    <td id="td_btn"><input  type="button" class="btn"  value="确定"  onclick="hide()" /></td>
   </tr>
  </table>
 
 </div>

 

JQUERY

 

function  show(){
  $("#cover_div").show();
  $("#id_messages").show();
}
function  hide(){
  $("#cover_div").hide();
  $("#id_messages").hide();
}

　

效果