點選按鈕彈窗DIV及彈窗細節
阿新 • • 發佈：2020-09-23
簡單分析一下彈窗,先放程式碼
這是樣式:
.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>）。 |