模態框

一、模態框

實現圖片點擊後出現彈窗，彈窗裡帶點擊的圖片大圖的效果。

分類：

　　1.模態對話框

　　　　模態對話框（Modal Dialogue Box，又叫做模式對話框），是指在用戶想要對對話框以外的應用程式進行操作時，必須首先對該對話框進行響應。如單擊【確定】或【取消】按鈕等將該對話框關閉。否則無法進行其他頁面操作。

　　2.非模態對話框

　　　　不需要關閉對話框也可以進行其他操作。

這裡我們使用模態對話框

html如下

<!--圖片模態框 -->
<div  id="mo">
    <!--關閉按鈕-->
    <span class="close" id="close">×</span>
    <!--圖片-->
    <img class="motaiimg" id="moimg">
    <!--圖片下方標題-->
    <div id="caption"></div>
</div>

Css如下

/*模態框*/
#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;
}

Js樣式如下

<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>

效果如下

這裡把模態框設為100%全屏，this確定了圖片路徑賦值給模態框，

並對圖片進行了動畫，讓他從中間開始從小放大。

同樣的方法，改變模態框的大小，也可以做一個彈窗。