替代在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模式

回答

相关问题