CSS图片弹出框

这篇文章绘制了一个图片弹出框。

1.html部分

<html>
  <head>
    <title>弹出框</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="fancybox">
      <div class="fancybox-content" style="border-width: 10px; width: 204px; height: 148px; opacity: 1;">
        <img id="fancybox-img" src="images/204x148.gif">
      </div>
      <a class="fancybox-close" style="display: block;"></a>
      <a href="javascript:;" class="fancybox-left" style="display: inline;"><span class="fancy-ico" id="fancybox-left-ico"></span></a>
      <a href="javascript:;" class="fancybox-right" style="display: inline;"><span class="fancy-ico" id="fancybox-right-ico"></span></a>
    </div>
  </body>
</html>

2.CSS部分

body {
    background-color: yellow;
}

span {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    display: none;
}

.fancybox {
    position: fixed;
    top: 30%;
    left: 30%;
}

.fancybox-content {
    width: 0;
    height: 0;
    padding: 0;
    outline: none;
    position: relative;
    overflow: hidden;
    z-index: 1102;
    border: 0px solid #fff;
}

.fancybox-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: transparent url('../images/fancybox.png') -40px 0px;
    cursor: pointer;
    z-index: 1103;
    display: none;
}

.fancybox-left, .fancybox-right {
    position: absolute;
    bottom: 0px;
    height: 100%;
    width: 35%;
    cursor: pointer;
    outline: none;
    #background: green;
    z-index: 1102;
    display: block;
}

.fancybox-right {
    right: 0px;
}

#fancybox-left-ico, #fancybox-right-ico {
    position: absolute;
    top: 50%;
    left: 24px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    cursor: pointer;
    z-index: 1102;
    #display: block;
    #display: none;
}

#fancybox-left-ico {
    background-image: url('../images/fancybox.png');
    background-position: -40px -30px;
    #background-color: blue;
}

#fancybox-right-ico {
    background-image: url('../images/fancybox.png');
    background-position: -40px -60px;
    #background-color: blue;
}

a.fancybox-left:hover span, a.fancybox-right:hover span {
    display: block;
}

3.依赖图片

204x148.gif

fancybox.png

4.效果图

2.png

CSS图片弹出框

1.html部分

2.CSS部分

3.依赖图片

4.效果图

推荐阅读更多精彩内容