點擊按鈕彈窗DIV及彈窗細節

簡單分析一下彈窗,先放代碼

這是樣式:

      .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=88); 
        } 
        .white_content { 
            display: none; 
            position: absolute; 
            top: 25%; 
            left: 25%; 
            width: 55%; 
            height: 55%; 
            padding: 20px; 
            border: 10px solid orange; 
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 

這是body

   <p>在這里可以添加一些解釋文字：
   <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">請點這里</a>
   </p> 

這里是彈窗內容

  <div id="light" class="white_content">
  在這里可以編輯一個層窗口程序. 
  <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">點這里關閉本窗口</a></div>`
  <div id="fade" class="black_overlay"></div> 

style.display='block' 有什么效果

定義和用法
display 屬性設置或返回元素的顯示類型。

HTML 中的元素大多是"內聯"或"塊"元素：一個內聯元素，在其左側和右側都是浮動內容。一個塊元素填滿整個行，並沒有什么可顯示在其左側或右側。

display 屬性還允許作者顯示或隱藏一個元素。與 visibility 屬性類似。然而，如果您設置 display:none，將隱藏整個元素，如果您設置 visibility:hidden，元素的內容將不可見，但元素保持原來的位置和大小。

語法
設置 display 屬性：

Object.style.display="value"
返回 display 屬性：

Object.style.display

值	描述
block	元素呈現為塊級元素。
compact	元素呈現為塊級元素或內聯元素，取決於上下文。
inherit	display 屬性的值從父元素繼承。
inline	默認。元素呈現為內聯元素。
inline-block	元素呈現為內聯盒子內的塊盒子。
inline-table	元素呈現為內聯表格（類似 <table>），表格前后沒有換行符。
list-item	元素呈現為列表。
marker	該值在盒子前后設置內容作為標記（與 :before 和 :after 偽元素一起使用，否則該值與 "inline" 是相同的）。
none	元素不會被顯示。
run-in	元素呈現為塊級或內聯元素，取決於上下文。
table	元素呈現為塊級表格（類似 <table>），表格前后帶有換行符。
table-caption	元素呈現為表格標題（類似 <caption>）。
table-cell	元素呈現為表格單元格（類似 <td> 和 <th>）。
table-column	元素呈現為單元格的列（類似 <col>）。
table-column-group	元素呈現為一個或多個列的分組（類似 <colgroup>）。
table-footer-group	元素呈現為表格頁腳行（類似 <tfoot>）。
table-header-group	元素呈現為表格頁眉行（類似 <thead>）。
table-row	元素呈現為表格行（類似 <tr>）。
table-row-group	元素呈現為一個或多個行的分組（類似 <tbody>）。