Question

我有一些图像，我需要有一个clickevent，它们会在每张图像上显示一个信息框。

   $('.show-infobox').on('click', function() {
    // Hide all infoboxes to prevent multiple showing at once
    $('.infobox').addClass('hidden');
    
    // Show infobox background
    $('.infobox-container').removeClass('hidden');
    
    // Show infobox matching last part of ID
    $('#' + this.id.replace('show')).removeClass('hidden');
});

$('.hide-infobox').on('click', function() {
    // Manually hide all infoboxes and background
    $('.infobox-container').addClass('hidden');
    $('.infobox').addClass('hidden');
}).children().on('click', function() {
    return false; 
});

@charset "utf-8";
.container {
	height: 800px;
	width: 1000px;
	margin: 0;
}
body {
    padding:0px;
    width:100%;
}

header
{
	top: 11px;
	width: 100%;
	padding-bottom: 10px;
	
	}
	#wrapper{
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	}
	
	ol {
	list-style-type: upper-roman;
	
	}
	
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}	
	
.mainBox
{
	background-color: #F0F0F0;
	width: 700px;
	box-shadow: 0px 0px 15px grey;
	top: 310px;
	border-radius: 20px;
	padding-top: 30px;
	padding-right: 50px;
	padding-left: 50px;
	}

	

.container nav ul {
	list-style-type: none;
}

nav 
{
	width: 720px;
	height:40px;
	background-color: #F0F0F0;
	border-color: grey;
	border-width: 1px;
	border-style: solid;
	border-radius: 10px;
	font-family: 'PT Sans';
	font-size: 20px;
	margin-bottom:50px;
}
ul{
padding-right: 20px;
margin-top: 6px;
}
a {
    color: black;
    text-decoration: none;
	padding: 25px;
}

a:hover 
{
     color:#00A0C6; 
     text-decoration:none; 
     cursor:pointer;  
}
.imagePack
{
	float:left;
	height: 300px;
	width: 200px;
	border-style:solid;
}
img.staff {
    cursor: pointer;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img.staff:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
	
.infobox-container {
    background: rgba(0, 0, 0, .2);
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.infobox {
    background: #fff;
    display: inline-block;
    padding: 2rem;
    border: solid 1px #eee;
}
.show-infobox {
    cursor: pointer;
}

.hidden {
    display: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Test</title>

<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.4.js"></script>
<script>
$( document ).ready(function() {
    $('.show-infobox').on('click', function() {
    // Hide all infoboxes to prevent multiple showing at once
    $('.infobox').addClass('hidden');
    
    // Show infobox background
    $('.infobox-container').removeClass('hidden');
    
    // Show infobox matching last part of ID
    $('#' + this.id.replace('show')).removeClass('hidden');
});

$('.hide-infobox').on('click', function() {
    // Manually hide all infoboxes and background
    $('.infobox-container').addClass('hidden');
    $('.infobox').addClass('hidden');
}).children().on('click', function() {
    return false; 
});
});
</script>


<div id="wrapper">
<center><header><img src="Bilder/spegel.jpg"/></header></center>
</head>

<!--Bakgrundsbild-->
<center><body bgcolor="#FFFFFF ">
<!--Javascript-->






<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->

<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center><img src="Bilder/title.png"></center>
<p>


<div class="infobox-container hide-infobox hidden">
    <div id="infobox-1" class="infobox hidden">This is infobox 1! <span class="hide-infobox">[close]</span></div>
    <div id="infobox-2" class="infobox hidden">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>

<span id="show-infobox-1" class="show-infobox">Show infobox 1</span>
<span id="show-infobox-2" class="show-infobox">Show infobox 2</span>



</div>

</body></center>
</div>
</html>

目前我只是试图在一个简单的文字上显示信息框，看它是否有效。但事实并非如此。只有容器在没有实际信息框的情况下出现。

Answer 1

我只是展示了如何做到这一点。您仍需要更改代码。我建议你通过w3schools以便更好地理解。

这是DEMO

$(".infobox-container, .infobox").hide();

$(".show-infobox").click(function()
{
var curId = this.id;
if(curId == "show1")
    {
        $(".infobox-container, #infobox-1").fadeIn(100);
    }
if(curId == "show2")
    {
        $(".infobox-container, #infobox-2").fadeIn(100);
    }
});

$(".hide-infobox").click(function()
{  
    $(".infobox-container, .infobox").fadeOut();
});

@charset"utf-8";
 .container {
    height: 800px;
    width: 1000px;
    margin: 0;
}
body {
    padding:0px;
    width:100%;
}
header {
    top: 11px;
    width: 100%;
    padding-bottom: 10px;
}
#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
}
ol {
    list-style-type: upper-roman;
}
H3 {
    font-size:16px;
    text-shadow: 0px 0px 5px grey;
}
.mainBox {
    background-color: #F0F0F0;
    width: 700px;
    box-shadow: 0px 0px 15px grey;
    top: 310px;
    border-radius: 20px;
    padding-top: 30px;
    padding-right: 50px;
    padding-left: 50px;
}
.container nav ul {
    list-style-type: none;
}
nav {
    width: 720px;
    height:40px;
    background-color: #F0F0F0;
    border-color: grey;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    font-family:'PT Sans';
    font-size: 20px;
    margin-bottom:50px;
}
ul {
    padding-right: 20px;
    margin-top: 6px;
}
a {
    color: black;
    text-decoration: none;
    padding: 25px;
}
a:hover {
    color:#00A0C6;
    text-decoration:none;
    cursor:pointer;
}
.imagePack {
    float:left;
    height: 300px;
    width: 200px;
    border-style:solid;
}
img.staff {
    cursor: pointer;
    opacity: 0.4;
    filter: alpha(opacity=40);
    /* For IE8 and earlier */
}
img.staff:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
}
.infobox-container {
    background: rgba(0, 0, 0, .2);
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.infobox {
    background: #fff;
    display: inline-block;
    padding: 2em;
    border: solid 1px #eee;
}
.show-infobox {
    cursor: pointer;
}
.hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
    
    <center>
        <header>
            <img src="Bilder/spegel.jpg" />
        </header>
    </center>
    <center>
        
        <!--Lådan som håller inne allt innehåll-->
        <div class="container">
            <!--Header-->
            <!--Nedan skrivs innehål/text till sidan-->
            <div class="mainBox">
                <center>
                    <img src="Bilder/title.png"  />
                </center>
                <p>
                    <div class="infobox-container">
                        <div id="infobox-1" class="infobox">This is infobox 1! <span class="hide-infobox">[close]</span></div>
                        <div id="infobox-2" class="infobox">This is infobox 2! <span class="hide-infobox">[close]</span></div>
                    </div>
                </p>
                <span class="show-infobox" id="show1">Show infobox 1</span>
                <span class="show-infobox" id="show2">Show infobox 2</span>
             </div>
        </div>
        </center>
    
    </div>

Javascript - 在点击图片上显示信息框

1 个答案: