以下代码使用脚本在第二次单击时收听无线电切换/取消选中.
我的问题是如何仅使用CSS执行此操作？
(function(lastimg) {
document.querySelector("#img-select").addEventListener('click', function(e){
if (e.target.tagName.toLowerCase() == 'input') {
if (lastimg == e.target) {
e.target.checked = false;
lastimg = null;
} else {
lastimg = e.target;
}
}
});
}());.container {
display: flex;
flex-wrap: wrap;
max-width: 660px;
}
.container > label {
flex: 1;
flex-basis: 33.333%;
}
.container > div {
flex: 1;
flex-basis: 100%;
}
.container label img {
display: block;
margin: 0 auto;
}
.container input, .container input ~ div { …我最近阅读了有关创建纯CSS模式框的文章:
我已经测试了代码并且效果很好.我正在将它用于我网站的联系和注册/登录页面.
我还没有完全掌握代码的一部分.
这是怎么回事......
<a href="#close" title="Close" class="close">X</a>
...... 关上盒子？
CSS中close没有任何内容隐藏或删除带有类的元素,也没有任何类似的函数定位href,#close或者title.它只是一行代码本身,当用户点击它时,模态窗口关闭(整齐而优雅,我可能会添加).
很明显,"关闭"文本并不重要.文本可以是任何东西,功能也可以.但如果删除"#",则样式会失败,但窗口仍会关闭.
那么"#"有什么特别之处呢？
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: …