Jquery 弹出div

最新推荐文章于 2018-05-17 11:06:59 发布

梦里断魂

最新推荐文章于 2018-05-17 11:06:59 发布

阅读量621

点赞数

分类专栏： Jquery 文章标签： jquery

本文链接：https://blog.csdn.net/lishaojun0115/article/details/44992785

版权

Jquery 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

head部分

    <head>
        <title>h-3.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery1.4.2.js" type='text/javascript'></script>
        <link rel="stylesheet" type="text/css" href="css/jobbasic.css">
        <script>
        $(function(){

    $('.rightInnerDiv3 div').click(function(){
            $('.zhe1').slideDown('1000');
            $('.zhe2').text($(this).text());
            $('.zhe2').css("background-color",$(this).css("background-color"));
            $('.zhe2').slideDown('1000');
            $('.zhe2').click(function(){

                $('.zhe1').slideUp("1000");;
                $('.zhe2').slideUp("1000");;
                });
        });
        })

        </script>
        <style>
<!--
html {
    font-family: 微软雅黑;
}

.rightInnerDiv3 {
    width: 700px;
    margin-top: 90px;
    height: 150px;
    margin-left: -15px;
    text-align: center;
    line-height: 50px;
}

.rightInnerDiv3 div {
    float: left;
    width: 70px;
    height: 70px;
    text-align: center;
    margin-left: 48px;
    background-color: #F1F1F1;
    cursor: pointer;
    border-radius: 20px;
    line-height: 30px;
    opacity: 0.9;
}

.rightInnerDiv3 div:hover {
    background-color: #fff;
    color: black;
}
.zhe1{
width: 100% ;
height: 100% ;
opacity: 0.8;
    border-radius: 10px;
    background-color: #ddd;
    z-index: 6;
    display: none;
    position: absolute;
}
.zhe2{
float:left;
width: 20% ;
height: 100px ;
opacity: 0.8;
margin:0 auto;
margin-top:200px;
    border-radius: 10px;
    background-color: #FFF;
    z-index: 7;
    display: none;
    position: absolute;
    margin-left: 450px;
    font-size: 20px;
line-height: 100px;
text-align: center;
cursor: pointer;
}

-->
</style>
    </head>

<div class="zhe1">

        <div class="zhe2" ></div>

    </div>


**body部分**


    <div class="rightInnerDiv3">
                <div style="line-height: 70px; background-color: #ffd700;">
                        满意
                    </div>

    div>

梦里断魂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 弹出div

head部分 <head> <title>h-3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta
复制链接

扫一扫