簡單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>