我想創建一個多標簽頁面,每個標簽上都有一個圖片模版。
我使用了來自w3school.com的代碼。該模式只在第一頁顯示,而在其他頁不顯示。無論我點擊什么圖片,帶有該圖片的模版都只顯示在第一頁。我是網頁設計的新手,所以我更喜歡使用CSS和簡單的JavaScript.
。誰能幫我找出如何使模態顯示在正確的頁面上?
HTML
< button class="tablink" onclick="openPage('Home', this, 'red')"> Home</button>。
< button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen"/span>> 新聞</按鈕>
< button class="tablink" onclick="openPage('Contact', this, 'blue')" > 聯系</按鈕>
< button class="tablink" onclick="openPage('About', this, 'orange')" > 關于</按鈕>
< div id="Home" class="tabcontent">
<h2>圖片模式</h2>
<p>在這個例子中,我們使用CSS來創建一個默認隱藏的模式(對話框)。
<p>我們使用JavaScript來觸發模態,并在模態被點擊時顯示模態內的當前圖片。還請注意,我們使用影像的 "alt "屬性的值作為模態內的影像標題文本。</p>
jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- 模態 -->
< div id="myModal" class="modal">
<span class="close"> ×</span>
< img class="modal-content" id="img01">/span>
<div id=" caption"> </div>>
</div>/span>
</div>/span>
< div id="News" class="tabcontent">
<h2>圖片模式</h2>
<p>在這個例子中,我們使用CSS來創建一個默認隱藏的模式(對話框)。
<p>我們使用JavaScript來觸發模態,并在模態被點擊時顯示模態內的當前圖片。還請注意,我們使用影像的 "alt "屬性的值作為模態內的影像標題文本。</p>
<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">/span>
<div id=" caption"> </div>>
</div>/span>
</div>/span>
< div id="Contact" class="tabcontent">
<h2>圖片模式</h2>
<p>在這個例子中,我們使用CSS來創建一個默認隱藏的模式(對話框)。
<p>我們使用JavaScript來觸發模態,并在模態被點擊時顯示模態內的當前圖片。還請注意,我們使用影像的 "alt "屬性的值作為模態內的影像標題文本。</p>
<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">/span>
<div id=" caption"> </div>>
</div>/span>
</div>/span>
< div id="About" class="tabcontent">
<h3>關于</h3>
<p>我們是誰,我們做什么。</p>
</div>/span>
CSS
* {box-sizing: border-box}。
/* 設定正文和檔案的高度為100% */。
body, html {
height: 100%;
margin: 0;
font-family: Arial。
}
/* 樣式標簽鏈接 */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: 指標。
padding: 14px 16px;
字體大小。17px;
width: 25%。
}
.tablink:hover {
background-color: #777;
}
/* 標簽內容的樣式(并為全頁面內容添加高度:100%) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {background-color: red; }
#News {background-color: green;}
#Contact {background-color: Blue;}
#About {background-color: orange;}
#myImg {
border-radius: 5px;
cursor: 指標。
transition: 0.3s。
}
#myImg:hover {opacity: 0.7; }
/* 模態(背景) */
.modal {
display: none; /* hidden by default */
position: fixed; /* stay in place */
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); /* Black w/ opacity */
}
/* 模態內容(圖片) */ }
.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 {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0) }
to {-webkit-transform:scale(1) }
}
@keyframes zoom {
from {transform:scale(0) }
to {transform:scale(1)} }
}
/* 關閉按鈕 */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
字體大小。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
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent"/span>)。
for (i = 0; i < tabcontent.length; i ) {
tabcontent[i].style.display = "none"/span>;
}
tablinks = document.getElementsByClassName("tablink") 。
for (i = 0; i < tablinks.length; i ) {
tablinks[i].style.backgroundColor = ""/span>;
}
document.getElementById(pageName).style.display = " block";
elmnt.style.backgroundColor = color;
}
//獲得id="defaultOpen "的元素并點擊它。
document.getElementById("defaultOpen"/span>).click()。
//獲得模態。
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"/span>;
modalImg.src = this.src;
captionText.innerHTML = this.alt。
}
//獲取關閉模式的<span>元素。
var span = document.getElementsByClassName("close") [0] 。
//當用戶點擊<span>(x)時,關閉模態。
span.onclick = function(){
modal.style.display = "none"/span>;
}
</script>
uj5u.com熱心網友回復:
每個模態都有獨立的函式,現在就可以了,在不久的將來,你可以研究一下this和小代碼的回圈
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent"/span>)。
for (i = 0; i < tabcontent.length; i ) {
tabcontent[i].style.display = "none"/span>;
}
tablinks = document.getElementsByClassName("tablink") 。
for (i = 0; i < tablinks.length; i ) {
tablinks[i].style.backgroundColor = ""/span>;
}
document.getElementById(pageName).style.display = " block";
elmnt.style.backgroundColor = color;
}
//獲得id="defaultOpen "的元素并點擊它。
document.getElementById("defaultOpen"/span>).click()。
//獲得模態。
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"/span>;
modalImg.src = this.src;
captionText.innerHTML = this.alt。
}
//獲取關閉模式的<span>元素。
var span = document.getElementsByClassName("close") [0] 。
//當用戶點擊<span>(x)時,關閉模態。
span.onclick = function(){
modal.style.display = "none"/span>;
}
//獲取第二個模態。
var modal2 = document.getElementById("myModal2") 。
//獲取圖片并將其插入模態內部 - 使用其 "alt "文本作為標題。
var img2 = document.getElementById("myImg2") 。
var modalImg2 = document.getElementById("img02") 。
var captionText2 = document.getElementById("caption2") 。
img2.onclick = function(/span>) {
modal2.style.display = "block"/span>;
modalImg2.src = this.src;
captionText2.innerHTML = this.alt。
}
//獲取關閉模態的第二個<span>元素。
var span2 = document.getElementsByClassName("close") [1] 。
//當用戶點擊<span>(x)時,關閉模態。
span2.onclick = function(){
modal2.style.display = "none"/span>。
}
//獲得第3個模態。
var modal3 = document.getElementById("myModal3") 。
//獲取圖片并將其插入模態內部 - 使用其 "alt "文本作為標題。
var img3 = document.getElementById("myImg3"/span>) 。
var modalImg3 = document.getElementById("img03") 。
var captionText3 = document.getElementById("caption3") 。
img3.onclick = function(/span>) {
modal3.style.display = "block"/span>;
modalImg3.src = this.src;
captionText3.innerHTML = this.alt。
}
//獲取關閉模態的第二個<span>元素。
var span3 = document.getElementsByClassName("close") [2] 。
//當用戶點擊<span>(x)時,關閉模態。
span3.onclick = function(){
modal3.style.display = "none"/span>;
}
* {
box-sizing: border-box
}
/* 設定body和檔案的高度為100% */
body,
html {
height: 100%;
margin: 0;
font-family: Arial。
}
/* 樣式標簽鏈接 */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: 指標。
padding: 14px 16px;
字體大小。17px;
width: 25%。
}
.tablink:hover {
background-color: #777;
}
/* 標簽內容的樣式(并為全頁面內容添加高度:100%) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {
background-color: 紅色。
}
#News {
background-color: 綠色。
}
#Contact {
background-color: blue;
}
#About {
background-color: orange;
}
.myImg {
border-radius: 5px;
cursor: 指標。
transition: 0.3s。
}
.myImg:hover {
opacity: 0.7;
}
/* 模態(背景) */
.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)。
/* Black w/ opacity */.
}
/* 模態內容(圖片) */ }
.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 {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* 關閉按鈕 */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
字體大小。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%;
}
}
< button class="tablink" onclick="openPage('Home', this, 'red')"> Home</button>。
< button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen"/span>> 新聞</按鈕>
< button class="tablink" onclick="openPage('Contact', this, 'blue')" > 聯系</按鈕>
< button class="tablink" onclick="openPage('About', this, 'orange')" > 關于</按鈕>
< div id="Home" class="tabcontent">
<h2>圖片模式</h2>
<p>在這個例子中,我們使用CSS來創建一個默認隱藏的模式(對話框)。
<p>我們使用JavaScript來觸發模態,并在模態被點擊時顯示模態內的當前圖片。還請注意,我們使用影像的 "alt "屬性的值作為模態內的影像標題文本。</p>
jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- 模態 -->
< div id="myModal" class="modal">
<span class="close"> ×</span>
< img class="modal-content" id="img01">/span>
<div id="caption"/span> class="caption"/span>> </div>>
</div>/span>
</div>/span>
< div id="News" class="tabcontent">
<h2>圖片模式</h2>
<p>在這個例子中,我們使用CSS來創建一個默認隱藏的模式(對話框)。
<p>我們使用JavaScript來觸發模態,并在模態被點擊時顯示模態內的當前圖片。還請注意,我們使用影像的 "alt "屬性的值作為模態內的影像標題文本。</p>
< img id="myImg2"/span> class="myImg" src="img_snow. jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- 模態 -->
< div id="myModal2" class="modal">
<span class="close"> ×</span>
< img class="modal-content" id="img02">/span>
<div id="caption2"/span> class="caption"/span>> </div>>
</div>/span>
</div>/span>
< div id="Contact" class="tabcontent">
<h2>圖片模式</h2>
<p>在這個例子中,我們使用CSS來創建一個默認隱藏的模式(對話框)。
<p>我們使用JavaScript來觸發模態,并在模態被點擊時顯示模態內的當前圖片。還請注意,我們使用影像的 "alt "屬性的值作為模態內的影像標題文本。</p>
< img id="myImg3"/span> class="myImg" src="img_snow. jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- 模態 -->
< div id="myModal3" class="modal">
<span class="close"> ×</span>
< img class="modal-content" id="img03">/span>
<div id="caption3"/span> class="caption"/span>> </div>>
</div>/span>
</div>/span>
< div id="About" class="tabcontent">
<h3>關于</h3>
<p>我們是誰,我們做什么。</p>
</div>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/321902.html
標籤:
上一篇:你如何用css創建這樣的形狀?
