替代在CSS模式

使用標籤和輸入我得到這個CSS模式腳本，不知道爲什麼我不能<a>或<div>標籤更換<label>。替代在CSS模式
另外，下面這一行是什麼意思？爲什麼我不能用<div>之類的東西替換<input>？

下面是完整的CSS代碼：

.modal { 
    opacity: 0; 
    visibility: hidden; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    text-align: left; 
    background: rgba(0,0,0, .9); 
    transition: opacity .25s ease; 
} 

.modal__bg { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    cursor: pointer; 
} 

.modal-state { 
    display: none; 
} 

.modal-state:checked + .modal { 
    opacity: 1; 
    visibility: visible; 
} 

.modal-state:checked + .modal .modal__inner { 
    top: 0; 
} 

.modal__inner { 
    transition: top .25s ease; 
    position: absolute; 
    top: -20%; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 50%; 
    margin: auto; 
    overflow: auto; 
    background: #fff; 
    border-radius: 5px; 
    padding: 1em 2em; 
    height: 50%; 
} 

.modal__close { 
    position: absolute; 
    right: 1em; 
    top: 1em; 
    width: 1.1em; 
    height: 1.1em; 
    cursor: pointer; 
} 

.modal__close:after, 
.modal__close:before { 
    content: ''; 
    position: absolute; 
    width: 2px; 
    height: 1.5em; 
    background: #ccc; 
    display: block; 
    transform: rotate(45deg); 
    left: 50%; 
    margin: -3px 0 0 -1px; 
    top: 0; 
} 

.modal__close:hover:after, 
.modal__close:hover:before { 
    background: #aaa; 
} 

.modal__close:before { 
    transform: rotate(-45deg); 
} 

@media screen and (max-width: 768px) { 

    .modal__inner { 
    width: 90%; 
    height: 90%; 
    box-sizing: border-box; 
    } 
}

和HTML

<p> 
    <label class="btn" for="modal-1">Show me modal with a cat</label> 
</p> 

<input class="modal-state" id="modal-1" type="checkbox" /> 
<div class="modal"> 
    <label class="modal__bg" for="modal-1"></label> 
    <div class="modal__inner"> 
    <label class="modal__close" for="modal-1"></label> 
    <h2>The title!</h2> 
    <p>This is the body</p> 
    </div> 
</div>

JSFIDDLE DEMO

來源

2017-02-21 Elaine Byene

因爲點擊一個標籤會切換一個複選框，但點擊一個鏈接會轉到另一個頁面，點擊一個div就什麼都不會做。
模式取決於輸入的選中狀態。一個div不能被檢查。

整個事情是一個討厭的黑客。它很聰明，但很討厭。跟蹤狀態以便基於用戶交互顯示內容是JavaScript更好地處理的工作。

來源

2017-02-21 22:28:02 Quentin

你必須使用一個標籤作爲explained here

此屬性明確與其他控制所定義的標籤相關聯。如果存在，則此屬性的值必須與同一文檔中某個其他控件的id屬性的值相同。缺席時，被定義的標籤與元素的內容相關聯。

來源

2017-02-21 22:28:55

label將單擊時更改input[type=checkbox]的狀態，並且可以放置在文檔的任何位置。

的input[type=checkbox]必須正確放在旁邊的語氣這樣的模態可以用CSS來定位：

input + .modal { display:none; } 
input:checked + .modal { display:block}

來源

2017-02-21 22:29:53 Malk

的<label>元素有一個for=""屬性，它尋找的id=""相同的值，你設置一個表單元素。

示例：<label for="myid1">...</label> <input id="myid1">當您單擊標籤時，它將更改匹配表單元素的狀態。它們通常在標記中彼此相鄰，但不一定。

爲<input type="checkbox">，你可以捕捉到CSS :checked狀態，並通過使用+或~選擇改變一些風格本身或下一個兄弟姐妹。這意味着模態div需要是複選框的旁邊的兄弟。

所有這些放在一起就是使用標籤來控制div，這是一種不使用任何Javascript來製作模式的CSS方式。

來源

2017-02-21 22:49:12 Stickers

替代在CSS模式

回答

相關問題