リンク上のマウスをクリックするとリンク先ページの小さなポップアップでライブプレビューを表示する方法は？

Question

私の質問は、このanswerの使用法に基づいています。私はhereとしてこのソリューションを使用したいと思います。しかし、マウスオーバーではなく、リンクをクリックした後にiframeが表示され、別のクリックで閉じることができます。それはCSSだけを使って可能ですか？

This live preview for <a href="http://en.wikipedia.org/">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover. 

.box{ 
display: none; 
width: 100%; 
} 
a:hover + .box,.box:hover{ 
display: block; 
position: relative; 
z-index: 100; 
} 

Answer 1

アンカータグではありませんが、チェックボックスハックを使用してそれを行うことができます。

.box{ 
 
    width: 100%; 
 
} 
 
input, .box { 
 
    display: none; 
 
} 
 
#checkbox:checked + .box { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 100; 
 
}

<label for="checkbox">Click</label> 
 
<input id="checkbox" type="checkbox"> 
 
<div class="box"> 
 
    <iframe src="http://en.wikipedia.org/" width="500px" height="500px"></iframe> 
 
</div>

あなたは:target疑似クラスを使用してaタグをクリックすると、あなたはIFRAMEを表示することができますが、1）それはjavascriptをせずに（ページにジャンプします）、および2）することができますページ上の別のリンクをクリックせずに、URL内のハッシュを変更せずに閉じます。本当にすごいです

.box{ 
 
    width: 100%; 
 
    display: none; 
 
} 
 
.box:target { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 100; 
 
}

<a href="#iframe">click to</a> | <a href="#whatever">click to close</a> 
 
<div class="box" id="iframe"> 
 
    <iframe src="http://en.wikipedia.org/" width="500px" height="500px"></iframe> 
 
</div>