圖片點擊後出現模態框效果的實現

時間 2019-11-16

標籤圖片點擊出現模態效果實現简体版

原文原文鏈接

不少時候咱們在瀏覽圖片時，會發現點擊圖片後，會彈出一個被點擊圖片的放大圖片浮在頁面上，佔滿整個窗口。這就是圖片模態框效果。css

這個效果能夠使用某些js庫實現，如bpopupJs。可是在這裏咱們使用純js實現，可以更好理解效果原理和實現方法。html

一.實現思路

咱們點擊小圖片以後,圖片模態框出現，同時圖片模態框上有一個關閉按鈕和圖片的標題。
web

所以，咱們的實現思路就是：佈局

圖片模態框有大圖片，關閉按鈕，圖片標題三部分。
將圖片模態框隱藏，在點擊小圖片以後，模態框出現。
點擊關閉按鈕後，模態框隱藏。

二.HTML代碼

首先，咱們的原始頁面上有一個圖片以下：
學習

HTML代碼以下：動畫

<h2>圖片點擊彈出模態框效果</h2>
<p>圖片模態框很不錯，是個值得學習的效果</p>
<img src="star.jpeg" id="real" alt="model test picture">

模態框的HTML代碼以下：this

<div class="motai" id="mo">
    <span class="close" id="close">×</span>
    <img class="motaiimg" id="moimg">
    <div id="caption"></div>
</div>

三.css代碼

咱們須要經過css設置模態框中各元素的表現效果同時將其隱藏起來，具體有以下幾步：spa

1.模態框code

 #mo{
        display: none;/*隱藏模態框*/
        width: 100%;
        height: 100%;
        position: fixed;/*定位方式爲固定定位*/
        overflow: auto;/*不滾動*/
        background-color: rgba(0,0,0,0.7);
        top: 0px;
        left: 0px;
        z-index: 1;/*置於頁面圖層之上*/
    }

2.關閉按鈕orm

  .close{
        font-size: 40px;
        font-weight: bold;
        position: absolute;
        top: 20px;
        right: 14%;
        color:#f1f1f1;
    }
  .close:hover,
  .close:focus{
        color:#bbb;
        cursor:pointer;
    }

3.模態框中圖片

#moimg{
        display: block;/*圖片表現爲塊*/
        margin:25px auto;/*圖片居中對齊*/
        width: 60%;
        max-width: 750px;/*自適應佈局*/
    }

4.圖片標題

#caption{
        text-align: center;/*文本居中*/
        margin: 15px auto;
        width: 60%;
        max-height: 750px;
        font-size: 20px;
        color:#ccc;
    }

以上就是基本的模態框各元素的css代碼，若是想實現點擊後擴大的動畫效果，能夠增長如下代碼：

    #moimg,#caption{
        -webkit-animation: first 1s;
        -o-animation: first 1s;
        animation: first 1s;
    }
    @keyframes first{
        from{transform: scale(0.1);}
        to{transform: scale(1);}
    }

經過以上步驟，咱們已經制做好了模態框頁面。在使用js來完成交互效果就能夠了。

四.js代碼

js代碼主要是圖片和關閉按鈕的點擊交互，須要注意的是js代碼須位於模態框HTML代碼以後，js具體代碼以下，：

var motai=document.getElementById('mo')
    var moimg=document.getElementById("moimg")
    var realimg=document.getElementById("real")
    var caption=document.getElementById("caption")

    realimg.onclick=function(){
        motai.style.display="block"
        moimg.src=this.src
        caption.innerHTML=this.alt
    }

    var span=document.getElementById("close");

    span.onclick=function(){
        motai.style.display="none";
    }

經過以上步驟，圖片的模態框效果就實現了，

最後總的代碼以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>close</title>
    <style>
    #real{
        /*點擊彈出模態框的圖片*/
        margin: 30px;
        width: 250px;
        border-radius:6px;
    }
    #real:hover{
        opacity: 0.6;
    }
    #mo{
        display: none;/*隱藏*/
        width: 100%;
        height: 100%;
        position: fixed;
        overflow: auto;
        background-color: rgba(0,0,0,0.7);
        top: 0px;
        left: 0px;
        z-index: 1;
    }
    #moimg{
        display: block;
        margin:25px auto;
        width: 60%;
        max-width: 750px;
    }
    #caption{
        text-align: center;
        margin: 15px auto;
        width: 60%;
        max-height: 750px;
        font-size: 20px;
        color:#ccc;
    }
    #moimg,#caption{
        -webkit-animation: first 1s;
        -o-animation: first 1s;
        animation: first 1s;
    }
    @keyframes first{
        from{transform: scale(0.1);}
        to{transform: scale(1);}
    }
    .close{
        font-size: 40px;
        font-weight: bold;
        position: absolute;
        top: 20px;
        right: 14%;
        color:#f1f1f1;
    }
    .close:hover,
    .close:focus{
        color:#bbb;
        cursor:pointer;
    }
    @media only screen and(max-width:750px ) {
        #moimg{
            width: 100%;
        }
    }
    </style>
</head>
<body>

<h2>圖片點擊彈出模態框效果</h2>
<p>圖片模態框很不錯，是個值得學習的效果</p>
<img src="star.jpeg" id="real" alt="model test picture">

<!--圖片模態框 -->
<div class="motai" id="mo">
    <span class="close" id="close">×</span>
    <img class="motaiimg" id="moimg">
    <div id="caption"></div>
</div>

<script>
    var motai=document.getElementById('mo')
    var moimg=document.getElementById("moimg")
    var realimg=document.getElementById("real")
    var caption=document.getElementById("caption")

    realimg.onclick=function(){
        motai.style.display="block"
        moimg.src=this.src
        caption.innerHTML=this.alt
    }

    var span=document.getElementById("close");

    span.onclick=function(){
        motai.style.display="none";
    }
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。