摘要:模態圖代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。
模態圖
代碼儲存在Github
效果預覽
初衷:很多人在初學前端的時候都會問,“如何入門前端?”
同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 “入門級” 的教材并不太滿意。學習一門新知識,實例是尤其重要的。在這里本人整理了目前頁面上常見功能實現的具體實例。愿能為大家提供一些幫助。
希望能夠與大家互相分享,共同進步。
效果預覽
×
CSS 部分
觸發圖片樣式
/*觸發圖片樣式*/
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {
opacity: 0.7;
}
模態框樣式
/*模態框樣式*/
.modal {
display: none; /* 默認隱藏 */
position: fixed; /* 相對瀏覽器定位 */
z-index: 1; /* 放在首位 */
padding-top: 100px; /* 頭部加padding */
left: 0;
top: 0;
width: 100%; /* 全寬 */
height: 100%; /* 全高 */
overflow: auto; /* 允許超出滾屏 */
background-color: rgba(0,0,0,0.9);
}
模態框內容樣式
/*模態框內容樣式*/
.modal-content {
margin: 0 auto; /*居中*/
display: block;
width: 80%;
max-width: 700px;
}
/*加斷點,響應式改變寬度*/
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
#caption {
margin: 0 auto; /*居中*/
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/*加動效果*/
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/*關閉按鈕樣式*/
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
JavaScript 內容
離開全局
(function() {})();
創建模態圖對象
/*模態圖對象*/
var modalImg = {};
編寫模態圖對象
/*觸發圖片*/
modalImg.triggerImg = document.getElementsByClassName("myImg");
/*關閉按鈕*/
modalImg.closeBtn = document.getElementById("closeBtn");
/*模態背景*/
modalImg.modal = document.getElementById("myModal");
/*模態圖*/
modalImg.img = document.getElementById("img01");
/*模態圖標題*/
modalImg.captionText = document.getElementById("caption");
/*模態圖顯示*/
modalImg.show = function() {
this.modal.style.display = "block";
this.img.src = this.triggerImg[0].src;
this.captionText.innerText = this.triggerImg[0].alt;
}
/*模態圖關閉*/
modalImg.close = function() {
this.modal.style.display = "none";
}
/*點擊模態圖以外區域,模態圖關閉*/
modalImg.outsideClick = function() {
var that = this;
window.onclick = function(event) {
if(event.target == that.modal) {
that.close();
}
}
}
/*初始化*/
modalImg.init = function() {
var that = this;
this.triggerImg[0].onclick = function() {
that.show();
}
this.closeBtn.onclick = function() {
that.close();
}
this.outsideClick();
}
調用
/*模態圖調用*/
modalImg.init();
好啦,現在所有的代碼都寫完啦!
趕快打開瀏覽器,看看效果吧!
在這里,只是給大家提供一種思路,參考。
具體的實現,每個人都可以有不同的方法。
請大家趕快發揮想象,把你最想實現的功能,在電腦敲出來吧!
代碼參考自w3cschools
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/116606.html
摘要:模態圖代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態圖 代碼儲存在Github效果預覽 初衷:很多人在初學前端的時候都會問,如何入門前端?同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 入門級 的教材并不...
摘要:模態圖代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態圖 代碼儲存在Github效果預覽 初衷:很多人在初學前端的時候都會問,如何入門前端?同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 入門級 的教材并不...
摘要:模態相冊代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態相冊 代碼儲存在Github效果預覽 初衷:很多人在初學前端的時候都會問,如何入門前端?同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 入門級 的教材...
摘要:模態相冊代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態相冊 代碼儲存在Github效果預覽 初衷:很多人在初學前端的時候都會問,如何入門前端?同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 入門級 的教材...
摘要:模態相冊代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態相冊 代碼儲存在Github效果預覽 初衷:很多人在初學前端的時候都會問,如何入門前端?同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 入門級 的教材...
閱讀 1047·2021-09-22 15:26
閱讀 2624·2021-09-09 11:52
閱讀 1917·2021-09-02 09:52
閱讀 2256·2021-08-12 13:28
閱讀 1193·2019-08-30 15:53
閱讀 522·2019-08-29 13:47
閱讀 3394·2019-08-29 11:00
閱讀 3105·2019-08-29 10:58