久久青草精品38国产免费,欧美久久超级碰碰碰二区三区

技術(shù)頻道 - html技術(shù)

CSS實現(xiàn)模式窗口(modal window)覆蓋層的3種方法

作者:admin 時間:2019-9-16 10:22:49 瀏覽:

本文介紹使用CSS創(chuàng)建模式窗口(modal window)覆蓋(overlay)層的3種方法，以及對比它們之間的優(yōu)劣之處。

CSS創(chuàng)建模式窗體

#1 絕對定位元素

創(chuàng)建覆蓋層的第一種方法是在頁面上絕對定位一個html元素。標(biāo)記中會有一個空的div，使用css，這個div是絕對定位的，并給出一個高的z-index值，以確保它位于頁面上所有其他元素的頂部，除了在這個覆蓋上打開的模式，它將獲得比覆蓋更高的z-index。

假設(shè)我們已經(jīng)在標(biāo)記中添加了一個空div并給它一個class.overlay，那么在頁面上放置這個overlay的css是：

html, body{
  min-height: 100%;
}
body{
  position: relative;
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /* 定義背景 */
}

代碼非常簡單，但是在使用這種技術(shù)時需要注意一些事情。

首先，你需要確保覆蓋層的位置絕對與主體(body)相關(guān)。因此，如果覆蓋層包含在另一個div中，并且另一個div的位置設(shè)置為relative，那么覆蓋層將絕對相對于其容器而不是頁面主體進行定位。因此，您要么讓覆蓋成為實體的直接子節(jié)點，要么確保其先前沒有一個位置設(shè)置為相對。

此外，還需要確保頁面的內(nèi)容向下擴展到視區(qū)(viewport)的底部或更高，因為主體(body)將展開以適應(yīng)其內(nèi)容的高度，并且，如果沒有足夠的內(nèi)容將主體(body)高度擴展到視區(qū)(viewport)底部，那么覆蓋層即使獲得100%的主體(body)高度，也不會到達(dá)視窗(viewport)的底部，所以它不會覆蓋它。

為了避免這種情況，并且不必?fù)?dān)心頁面上的內(nèi)容量，并且仍然獲得覆蓋整個視區(qū)大小的覆蓋層，您應(yīng)該在根html元素和主體(body)上設(shè)置一個高度。不過，當(dāng)您設(shè)置html和body元素的高度時，還需要記住這些事：

第一件要注意的事情是，如果給html元素一個100%的高度（相對于視窗100%的高度），也給主體(body)一個100%的高度（相對于根html計算），那么將兩者的高度都設(shè)置為視窗100%的高度，因此，在主體(body)延伸的情況下無論內(nèi)容向下走多遠(yuǎn)，它們的高度保持與視口的高度一致，覆蓋的高度也將保持相同。在這種情況下，如果您向下滾動頁面，覆蓋將向上滾動，您將看到下面沒有覆蓋的內(nèi)容，就像覆蓋被切斷一樣。

這里的解決方案是在根元素和主體上設(shè)置最小高度，而不是設(shè)置高度值，這在大多數(shù)情況下是可取的。通過設(shè)置最小高度，可以確保它們的高度到達(dá)視窗(viewport)底部，并隨著內(nèi)容的增加而增加。最后，要使覆蓋層的高度增加并使其展開以覆蓋頁面滾動上的所有內(nèi)容，必須在正文上設(shè)置一個位置：relative，以便覆蓋層的高度隨著正文的高度增加而展開。

另一件要注意的事情是，不要使用不必要的高索引（z-index）值。很多開發(fā)人員當(dāng)要將覆蓋層或任何其他元素放置在頁面上其他元素之上時，傾向于使用非常高的z-index值，比如z-index:999999，這是不必要的。在大多數(shù)情況下，索引（z-index）值為10（有時甚至更少）就足以使一個元素位于頁面上其他元素之上。您只需要知道是否有其他元素獲得索引，如果有，只需將覆蓋的索引設(shè)置為高于其他元素的最高值。

最后，您還應(yīng)該記住，使用這種技術(shù)，您將向標(biāo)記添加一個空div，當(dāng)然這是非語義的。

html代碼

<html>
<head>
<style type="text/css" >
html, body {
    margin: 0;
    min-height: 100%;
}

body {
    position: relative; /* needed for the overlay to extend when you scroll */
    /* general styles */
    padding: 30px;
    font-family: 'Open Sans', sans-serif;
    background: #f1c40f;
    color: #fff;
}

/* overlay styles, all needed */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}

/* just some content with arbitrary styles for explanation purposes */
.modal {
    width: 300px;
    height: 200px;
    line-height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    background-color: #f1c40f;
    border-radius: 5px;
    text-align: center;
    z-index: 11; /* 1px higher than the overlay layer */
}

.content {
    margin: 30px;
}

h1 {
    font-family: 'Federo', sans-serif;
}
</style>
</head>
<body>
</br>

  <div class="overlay"></div>
  <div class="modal">這是一個模式窗口</div>
  <div class="content">
      <h1>使用絕對定位的元素創(chuàng)建覆蓋層</h1>
      純CSS實現(xiàn)圓角樣式效果的4種寫法，這些方法都要用到圓角圖片來輔助完成。在使用這些方法前，要制作好相應(yīng)的圓角圖片和背景圖片，因此要求你懂一點圖片制作技術(shù)。就實現(xiàn)代碼而言，實例3是代碼最少的，圖片也只需要兩張，因此只值得推薦的寫法。CSS+圖片實現(xiàn)圓角的樣式效果，不受瀏覽器限制，這是其相對于CSS3的優(yōu)點。但隨著IE8用戶日漸減少，可以預(yù)見，CSS3的寫法將會越來越多人采用，畢竟其寫法十分簡單，掌握起來也更加容易，更難得的是，它不再需要制作額外的圖片來配合了。
      </div>

</body>
</html>

execcode getcode

css創(chuàng)建模式覆蓋層

#2 固定位置元素

第二種添加覆蓋層的方法與前一種方法非常相似，一樣是在標(biāo)記中使用相同的.overlay元素，但不是絕對定位覆蓋，而是給它一個固定的位置，以及一個全寬和全高來覆蓋整個視區(qū)。因為這個例子中的覆蓋是固定的，不管你向下滾動多遠(yuǎn)，如果我們想要的話，覆蓋都會保持在原來的位置，覆蓋整個視區(qū)。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5);
}

與絕對定位元素（相對于具有位置的容器定位）不同，相對、固定元素是相對于視區(qū)定位：

而position:absolute元素的位置和尺寸相對于其包含塊，position:fixed元素的位置和尺寸始終相對于初始包含塊，這通常是視區(qū)：瀏覽器窗口或紙張的頁面框。— W3C Wiki

通常，當(dāng)使用固定位置時，您不必?fù)?dān)心將疊加層div放在標(biāo)記中的位置。無論您將其放置在何處，它都將獲得相對于視區(qū)的固定位置，除非您正在轉(zhuǎn)換覆蓋層的一個祖先，在這種情況下，轉(zhuǎn)換的元素將為其所有已定位的子體（甚至是那些正在獲得固定位置的子體）創(chuàng)建包含塊。這一事實讓很多開發(fā)人員。因此，如果您發(fā)現(xiàn)自己修復(fù)了一個元素，但結(jié)果與預(yù)期不符，請檢查此固定元素是否是正在轉(zhuǎn)換的元素的后代。

<html>
<head>
<style type="text/css" >
body {
    /* general styles */
    padding: 30px;
    font-family: 'Open Sans', sans-serif;
    background: #f1c40f;
    color: #fff;
}

/* overlay styles, all needed */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}

/* just some content with arbitrary styles for explanation purposes */
.modal {
    width: 300px;
    height: 200px;
    line-height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    background-color: #f1c40f;
    border-radius: 5px;
    text-align: center;
    z-index: 11; /* 1px higher than the overlay layer */
}

.content {
    margin: 30px;
}

h1 {
    font-family: 'Federo', sans-serif;
}
</style>
</head>
<body>
</br>

  <div class="overlay"></div>
  <div class="modal">這是一個模式窗口</div>
  <div class="content">
      <h1>使用固定位置元素創(chuàng)建疊加層</h1>
      純CSS實現(xiàn)圓角樣式效果的4種寫法，這些方法都要用到圓角圖片來輔助完成。在使用這些方法前，要制作好相應(yīng)的圓角圖片和背景圖片，因此要求你懂一點圖片制作技術(shù)。就實現(xiàn)代碼而言，實例3是代碼最少的，圖片也只需要兩張，因此只值得推薦的寫法。CSS+圖片實現(xiàn)圓角的樣式效果，不受瀏覽器限制，這是其相對于CSS3的優(yōu)點。但隨著IE8用戶日漸減少，可以預(yù)見，CSS3的寫法將會越來越多人采用，畢竟其寫法十分簡單，掌握起來也更加容易，更難得的是，它不再需要制作額外的圖片來配合了。
  </div>

</body>
</html>

execcode getcode

同樣，使用這種技術(shù)，我們在標(biāo)記中添加一個空元素，這是違反標(biāo)記語義的。那么，我們該怎樣處理呢？

#3 使用偽元素

為了避免在我們的標(biāo)記中添加空元素，我們可以使用偽元素來創(chuàng)建疊加層。

此技術(shù)中的樣式和注意事項與之前的樣式和注意事項幾乎相同，除了不使用類.overlay設(shè)置和定位空元素，我們將在body上設(shè)置:before或:after偽元素。

html, body {
  min-height: 100%;
}

body {
  position: relative; /* needed if you position the pseudo-element absolutely */
}

body:after {
  content: "";
  display: block;
  position: fixed; /* could also be absolute */
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.2);
}

您可以選擇絕對地相對于主體定位偽元素，或者給它一個固定的位置。無論你選擇哪種方式，你都必須考慮我們在前兩種技術(shù)中提到的要點。

<html>
<head>
<style type="text/css" >
body {
    /* general styles */
    padding: 30px;
    font-family: 'Open Sans', sans-serif;
    background: #f1c40f;
    color: #fff;
}

/* overlay styles, all needed */
body:after {
    content: "";
    display: block;
    position: fixed; /* could also be absolute */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    background-color: rgba(0,0,0,0.5);
}

/* just some content with arbitrary styles for explanation purposes */
.modal {
    width: 300px;
    height: 200px;
    line-height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    background-color: #f1c40f;
    border-radius: 5px;
    text-align: center;
    z-index: 11; /* 1px higher than the overlay layer */
}

.content {
    margin: 30px;
}

h1 {
    font-family: 'Federo', sans-serif;
}
</style>
</head>
<body>
</br>

  <div class="modal">這是一個模式窗口</div>
  <div class="content">
      <h1>使用偽元素創(chuàng)建疊加層</h1>
      純CSS實現(xiàn)圓角樣式效果的4種寫法，這些方法都要用到圓角圖片來輔助完成。在使用這些方法前，要制作好相應(yīng)的圓角圖片和背景圖片，因此要求你懂一點圖片制作技術(shù)。就實現(xiàn)代碼而言，實例3是代碼最少的，圖片也只需要兩張，因此只值得推薦的寫法。CSS+圖片實現(xiàn)圓角的樣式效果，不受瀏覽器限制，這是其相對于CSS3的優(yōu)點。但隨著IE8用戶日漸減少，可以預(yù)見，CSS3的寫法將會越來越多人采用，畢竟其寫法十分簡單，掌握起來也更加容易，更難得的是，它不再需要制作額外的圖片來配合了。
  </div>

</body>
</html>