国产精品午夜无码体验区,国产三级在线现免费观看

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

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

作者:admin 時(shí)間:2019-9-16 10:22:49 瀏覽:

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

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

#1 絕對(duì)定位元素

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

假設(shè)我們已經(jīng)在標(biāo)記中添加了一個(gè)空div并給它一個(gè)class.overlay，那么在頁(yè)面上放置這個(gè)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); /* 定義背景 */
}

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

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

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

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

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

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

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

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

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

</body>
</html>

execcode getcode

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

#2 固定位置元素

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

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

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

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

通常，當(dāng)使用固定位置時(shí)，您不必?fù)?dān)心將疊加層div放在標(biāo)記中的位置。無(wú)論您將其放置在何處，它都將獲得相對(duì)于視區(qū)的固定位置，除非您正在轉(zhuǎn)換覆蓋層的一個(gè)祖先，在這種情況下，轉(zhuǎn)換的元素將為其所有已定位的子體（甚至是那些正在獲得固定位置的子體）創(chuàng)建包含塊。這一事實(shí)讓很多開(kāi)發(fā)人員。因此，如果您發(fā)現(xiàn)自己修復(fù)了一個(gè)元素，但結(jié)果與預(yù)期不符，請(qǐng)檢查此固定元素是否是正在轉(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">這是一個(gè)模式窗口</div>
  <div class="content">
      <h1>使用固定位置元素創(chuàng)建疊加層</h1>
      純CSS實(shí)現(xiàn)圓角樣式效果的4種寫(xiě)法，這些方法都要用到圓角圖片來(lái)輔助完成。在使用這些方法前，要制作好相應(yīng)的圓角圖片和背景圖片，因此要求你懂一點(diǎn)圖片制作技術(shù)。就實(shí)現(xiàn)代碼而言，實(shí)例3是代碼最少的，圖片也只需要兩張，因此只值得推薦的寫(xiě)法。CSS+圖片實(shí)現(xiàn)圓角的樣式效果，不受瀏覽器限制，這是其相對(duì)于CSS3的優(yōu)點(diǎn)。但隨著IE8用戶日漸減少，可以預(yù)見(jiàn)，CSS3的寫(xiě)法將會(huì)越來(lái)越多人采用，畢竟其寫(xiě)法十分簡(jiǎn)單，掌握起來(lái)也更加容易，更難得的是，它不再需要制作額外的圖片來(lái)配合了。
  </div>

</body>
</html>

execcode getcode

同樣，使用這種技術(shù)，我們?cè)跇?biāo)記中添加一個(gè)空元素，這是違反標(biāo)記語(yǔ)義的。那么，我們?cè)撛鯓犹幚砟兀?/p>

#3 使用偽元素

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

此技術(shù)中的樣式和注意事項(xiàng)與之前的樣式和注意事項(xiàng)幾乎相同，除了不使用類(lèi).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);
}

您可以選擇絕對(duì)地相對(duì)于主體定位偽元素，或者給它一個(gè)固定的位置。無(wú)論你選擇哪種方式，你都必須考慮我們?cè)谇皟煞N技術(shù)中提到的要點(diǎ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 */
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">這是一個(gè)模式窗口</div>
  <div class="content">
      <h1>使用偽元素創(chuàng)建疊加層</h1>
      純CSS實(shí)現(xiàn)圓角樣式效果的4種寫(xiě)法，這些方法都要用到圓角圖片來(lái)輔助完成。在使用這些方法前，要制作好相應(yīng)的圓角圖片和背景圖片，因此要求你懂一點(diǎn)圖片制作技術(shù)。就實(shí)現(xiàn)代碼而言，實(shí)例3是代碼最少的，圖片也只需要兩張，因此只值得推薦的寫(xiě)法。CSS+圖片實(shí)現(xiàn)圓角的樣式效果，不受瀏覽器限制，這是其相對(duì)于CSS3的優(yōu)點(diǎn)。但隨著IE8用戶日漸減少，可以預(yù)見(jiàn)，CSS3的寫(xiě)法將會(huì)越來(lái)越多人采用，畢竟其寫(xiě)法十分簡(jiǎn)單，掌握起來(lái)也更加容易，更難得的是，它不再需要制作額外的圖片來(lái)配合了。
  </div>

</body>
</html>