简单html弹窗

css:

<style type="text/css">
    .moneyrecord {
       display:none;
       border:0.5em solid #00AAEE;
       /*height:30%;*/
       width:40%;
       position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
       top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
       left:30%;
       z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
       background: white;
       padding: 0px 5px 5px 5px;
   } 
   .moneyrecordover {
       width: 100%;
       height: 100%;
       opacity:0.8;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/
       filter:alpha(opacity=80);
       display: none;
       position:absolute;
       top:0;
       left:0;
       z-index:1;
       background: silver;
   }
</style>

js:

  <script type="text/javascript">
     var login = document.getElementById('login');
     var over = document.getElementById('over');

     var minput = document.getElementById('minput');
     var mover = document.getElementById('mover');

     function show() {
        login.style.display = "block";
        over.style.display = "block";
     }
     function hide() {
        login.style.display = "none";
        over.style.display = "none";
     }

     function showinput() {
        minput.style.display = "block";
        mover.style.display = "block";
     }
     function hideinput() {
        minput.style.display = "none";
        mover.style.display = "none";
     }
 </script>

html:

   <div class="moneyrecord" id="login">
       <a class="button" style="padding: 0px 0px 0px 0px;float: right;" href="javascript:hide()">关闭</a>
       <div style="padding-left: 5%;">      
          弹窗内容1
       </div>
   </div>
   <div class="moneyrecordover" id="over"></div>

   <div class="moneyrecord" id="minput">
     <a class="button" style="padding: 0px 0px 0px 0px;float: right;" href="javascript:hideinput()">关闭</a>
     <div style="padding-left: 5%;">
　　   弹窗内容2
     </div>
    </div> 
   <div class="moneyrecordover" id="mover"></div>