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 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>


你可能感兴趣的:(jquery)