<code id="ymosk"><acronym id="ymosk"></acronym></code>
  • <strong id="ymosk"><input id="ymosk"></input></strong>
    <nav id="ymosk"></nav>
    <source id="ymosk"><input id="ymosk"></input></source>
  • <object id="ymosk"></object>
    技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

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

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

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

    CSS創建模式窗體

    CSS創建模式窗體

    #1 絕對定位元素

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

    <html>
      <body>
       <div class="overlay"></div>
       
      <body>
    <html>

    假設我們已經在標記中添加了一個空div并給它一個class.overlay,那么在頁面上放置這個overlay的css是:

    html, body{
      min-height100%;
    }
    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); /* 定義背景 */
    }

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

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

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

    為了避免這種情況,并且不必擔心頁面上的內容量,并且仍然獲得覆蓋整個視區大小的覆蓋層,您應該在根html元素和主體(body)上設置一個高度。不過,當您設置html和body元素的高度時,還需要記住這些事:

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

    這里的解決方案是在根元素和主體上設置最小高度,而不是設置高度值,這在大多數情況下是可取的。通過設置最小高度,可以確保它們的高度到達視窗(viewport)底部,并隨著內容的增加而增加。最后,要使覆蓋層的高度增加并使其展開以覆蓋頁面滾動上的所有內容,必須在正文上設置一個位置:relative,以便覆蓋層的高度隨著正文的高度增加而展開。
    另一件要注意的事情是,不要使用不必要的高索引(z-index)值。很多開發人員當要將覆蓋層或任何其他元素放置在頁面上其他元素之上時,傾向于使用非常高的z-index值,比如z-index:999999,這是不必要的。在大多數情況下,索引(z-index)值為10(有時甚至更少)就足以使一個元素位于頁面上其他元素之上。您只需要知道是否有其他元素獲得索引,如果有,只需將覆蓋的索引設置為高于其他元素的最高值。
    最后,您還應該記住,使用這種技術,您將向標記添加一個空div,當然這是非語義的。

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

    </body>
    </html>

    execcodegetcode

    css創建模式覆蓋層

    css創建模式覆蓋層

    #2 固定位置元素

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

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

    與絕對定位元素(相對于具有位置的容器定位)不同,相對、固定元素是相對于視區定位:

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

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

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

    </body>
    </html>

    execcodegetcode

    同樣,使用這種技術,我們在標記中添加一個空元素,這是違反標記語義的。那么,我們該怎樣處理呢?

    #3 使用偽元素

    為了避免在我們的標記中添加空元素,我們可以使用偽元素來創建疊加層。

    此技術中的樣式和注意事項與之前的樣式和注意事項幾乎相同,除了不使用類.overlay設置和定位空元素,我們將在body上設置: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);
    }

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

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

    </body>
    </html>

    execcodegetcode

     

    標簽: 模式窗口  overlay  覆蓋層  css  css3  模式窗體  
    • IT熱文
    • 站長推薦
    微拍福利