Kuhakikisha kwa kurejea: Mfano wa picha ya modali
- Mwaka wa kwanza Gali ya kina ya picha
- Mwaka wa kimara Kifungu cha kina cha kusoma
Mafanikio ya kusoma kuhakikisha kuwa inaweza kutengeneza maelezo ya modali inayotumia CSS na JavaScript.
×
![]()
Mfano wa picha ya modali
Modali ni jendani ya uharibifu/kifungu inayotiririka kwenye eneo la ukurasa huo.
Mfano huu hau tumia kielekileo kubwa kama kueleza kwa maelezo ya hivi karibuni "modal box", hata hivyo katika maelezo hii tumia picha.
Kipimo cha kwanza - Ongeza HTML:
<!-- Kufaa modal box --> <img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px"> <!-- 模态框 --> <div id="myModal" class="modal"> <!-- 关闭按钮 --> <span class="close">×</span> <!-- 模态内容（图片） --> <img class="modal-content" id="img01"> <!-- 模态标题（图片文本） --> <div id="caption"></div> </div>
第二步 - 添加 CSS：
/* 设置用于触发模态的图像的样式 */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* 默认是隐藏的 */
position: fixed; /* 留在原地 */
z-index: 1; /* 留在顶部 */
padding-top: 100px; /* 框的位置 */
left: 0;
top: 0;
width: 100%; /* 全宽 */
height: 100%; /* 全高 */
overflow: auto; /* 如果需要，启用滚动 */
background-color: rgb(0,0,0); /* 回退颜色 */
background-color: rgba(0,0,0,0.9); /* 黑色带透明度 */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* 模态图像的标题（图像文本）- 与图像相同的宽度 */
#caption {
margin: 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,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 小屏幕上的图片宽度为 100% */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
第三步 - 添加 JavaScript：
// 获取模态框
var modal = document.getElementById("myModal");
// 获取图像并将其插入模态框内 - 使用其 "alt" 文本作为标题
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// 获取关闭模态框的 <span> 元素
var span = document.getElementsByClassName("close")[0];
// 当用户单击 <span> (x) 时，关闭模态框
span.onclick = function() {
modal.style.display = "none";
}
Tovuti za muhimu
- Mwaka wa kwanza Gali ya kina ya picha
- Mwaka wa kimara Kifungu cha kina cha kusoma
