CSS图片选择 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>well done!</title>
</head>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<style type="text/css">

    .tip {
        position: absolute;
        right: 10px;
        bottom: 5px;
        width: 100px;
        height: 50px;
        border-radius: 18px;
        background-color: green;
        cursor: pointer;
    }

    .mask {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        display: none;
        background-color: gray;
        z-index: 10;
        padding: 10px auto;
    }

    .mask:after {
        position: fixed;
        right: 5px;
        top: 5px;
        content: "X";
        color: lawngreen;
    }

    .container {

        width: 400px;
        height: 200px;
        background-color: antiquewhite;
        margin: 50px auto;
        overflow: scroll;
    }

    .item {
        position: relative;
        width: 180px;
        height: 100px;
        background-color: chocolate;
        float: left;

    }

    .pannel {
        clear: both;
        margin: 10px 5px 5px 10px;;
        background-color: coral;
        float: left;
    }

    .pannel div {
        float: left;

        color: chartreuse;

    }


</style>
<body>


<div class="tip"></div>
<div class="mask">
    <div class="container">
        <div class="item">


            <div class="pannel">

                <div>预览</div>
                <div>删除</div>
                <div>编辑</div>
            </div>

        </div>
        <div class="item">


            <div class="pannel">

                <div>预览</div>
                <div>删除</div>
                <div>编辑</div>
            </div>

        </div>
        <div class="item">


            <div class="pannel">

                <div>预览</div>
                <div>删除</div>
                <div>编辑</div>
            </div>

        </div>
        <div class="item">


            <div class="pannel">

                <div>预览</div>
                <div>删除</div>
                <div>编辑</div>
            </div>

        </div>


    </div>


</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".tip").click(function () {

            $(".mask").css("display", "block");
        });
    });
</script>
<script>
    for (var i = 0; i < 1000; i++) {
        document.write("<br>");

    }

</script>
</body>
</html>

 

posted @ 2015-11-17 07:32  wind90  阅读(379)  评论(0)    收藏  举报