单击图片时显示弹出窗口

Question

通常点击按钮我们可以创建弹出窗口。但是，当用户点击图片时，我在显示弹出窗口时遇到了一些麻烦。

• 我使用css代码
• 我有一个按钮，按钮是图片。从按钮（图片）我不知道如何获取值然后传递给javascript进行弹出。

这是我的代码：

<div class="nav-divider">&nbsp;</div>
    <img src="images/shared/nav/form.giff" width="93" height="14" alt="" />
<div class="nav-divider">&nbsp;</div>

Answer 1

这是css popup

DEMO JSFIDDLE

Source

HTML

<input type="checkbox" id="linkie" class="popUpControl">
    <label for="linkie" class="link">
        <span><img src="http://www.clker.com/cliparts/9/1/5/2/119498475589498995button-red_benji_park_01.svg.med.png" height="50"></img></span>

    <span class="box">
    <span class="title">Title</span>
    <span class="copy">Pellentesque habitant morbi tristique senectus et netus</span>
    </span>
</label> 

CSS

label {
    position: relative;
}
.box {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 100;

    /* Prevent some white flashing in Safari 5.1 */
    -webkit-backface-visibility: hidden;

    background-color: #eeeeee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #999999); 
    background-image:    -moz-linear-gradient(top, #eeeeee, #999999); 
    background-image:     -ms-linear-gradient(top, #eeeeee, #999999); 
    background-image:      -o-linear-gradient(top, #eeeeee, #999999); 

    -moz-border-radius:    20px; 
    -webkit-border-radius: 20px; 
    border-radius:         20px; 

    -moz-background-clip:    padding; 
    -webkit-background-clip: padding-box; 
    background-clip:         padding-box; 

    width: 260px; 
    padding: 20px;
    margin: 24px 0;
    opacity: 0;

    -webkit-transform: scale(0) skew(50deg);
    -moz-transform:    scale(0) skew(50deg);
    -ms-transform:     scale(0) skew(50deg);
    -o-transform:      scale(0) skew(50deg);

    -webkit-transform-origin: 0px -30px;
    -moz-transform-origin:    0px -30px;
    -ms-transform-origin:     0px -30px;
    -o-transform-origin:      0px -30px;

    -webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
    -moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s;
    -ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s;
    -o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;
}

.box:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 30px;
    border-bottom: 20px solid #eee;
    border-left:   14px solid transparent;
    border-right:  14px solid transparent;
    width:  0;
    height: 0;
}

.popUpControl:checked ~ label > .box {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg);
    -moz-transform:    scale(1) skew(0deg);
    -ms-transform:     scale(1) skew(0deg);
    -o-transform:      scale(1) skew(0deg);
}
.popUpControl { 
    display: none; 
}
/* For link example */
.link { color: blue; text-decoration: underline; }
.title { display: block; font-weight: bold; margin: 0 0 10px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; }
.copy { color: black; text-decoration: none;  }