Light boxなどを使わないで画像、文字を同一画面上にそれのみを表示する方法は?

質問

Light boxなどを使わないでYahooの画像検索のように画面上にある画像や文字をクリックすると同一画面上に背景がオーバーレイ状態になり、クリックした画像、文字のみが表示される方法ってありますか?
ご存知の方、教えてください。ヒントでもいいです。よろしくお願いします。

回答No.1

leap_day

こんにちは

似たような感じであればこんな感じでも出来ます

<script language="javascript">
<!--
function imgup(n) {
document.body.style.backgroundColor="dimgray";
document.getElementById("id").style.display = "block";
document.getElementById("id").innerHTML = "<img src='"+n+"' width='100%' height='100%'>";
}
function textup(n) {
document.body.style.backgroundColor="dimgray";
document.getElementById("id").style.display = "block";
document.getElementById("id").innerHTML = n;
}

function disp() {
document.body.style.backgroundColor="white";
document.getElementById("id").style.display = "none";
}
//-->
</script>

<div id="id" style='position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:-250px;width:500px;height:500px;z-index:10;background-color:white;display:none;cursor:pointer;' onClick='disp()';'></div>
<img src="sample0.gif" onclick="imgup(this.src)">
<img src="sample1.gif" onclick="imgup(this.src)">
<p>
spanで囲んだものを表示---<span onClick="textup(this.innerHTML)">これを表示</span>---<br>
別にspanでなくても良い---<p onClick="textup(this.innerHTML)">これでも良い</p>---

お礼

ありがとうございます。やってみます。