CSS+JQuery提示框----------纯手工打造、兼容性还哦可、可移植任何项目

来源：互联网发布：制作计划的软件编辑：程序博客网时间：2024/06/10 22:47

<html>
   <head>
       <meta charset="utf-8" />
       <script type="text/javascript" src="jquery-1.8.2.js"></script>
       <title>背景透明</title>
       <style>
           *{
               margin:0;
               padding:0;
           }
           body{
               position:relative;
               width:100%;
               height:100%;
           }
           .aaa{
               background-color:#fff;
               border:10px solid gray;
               border-radius:4px 4px 4px 4px;

               display:none;
               width:300px;
               position:absolute;
               top:30%;
               left:30%;
               z-index:11;

           }

           .show{
               display:none;
               width:100%;
               height:100%;
               position:fixed;
                z-index:10;
               left:0;
               top:0;
               background:#000000;
               opacity:0.3;
               filter:alpha(opacity=30);
           }
           a{
               TEXT-DECORATION:none
           }
           .w_close:hover{
               color:#666666;
               font-size:12px;
           }
           .w_close:link {
               color:#666666;
               font-size:12px;
           }
           .w_close:active{
               color:#666666;
               font-size:12px;
           }
           .w_close:visited {
               color:#666666;
               font-size:12px;
           }
       </style>
   </head>
   <body >
       <div id="test">
           <p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
           <p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
           <p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
           <p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
           <p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
           <p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
           <p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
           <p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
           <p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>
           <p>刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮刘成亮</p>

       </div>
       <div id="showError">显示提示</div>


       <div id="" class="show"></div>
       <div class="aaa">
           <div style="height:20px;background-color:#F2F2F2">
               <span style="float:right;cursor:pointer;padding-top:4px;padding-right:4px;" id="close"><a class="w_close" href="javascript:void(0);">关闭</a></span>
           </div>
           <div style="">
               <table>
                   <tr>
                       <th>用户名：</th>
                       <td><input type="text" name="name"></td>
                   </tr>
                   <tr>
                       <th>密码：</th>
                       <td><input type="password" name="password"></td>
                   </tr>
                   <tr>
                       <td><input type="submit" value="提交"></td>
                   </tr>
               </table>

           </div>
       </div>
   </body>
   <script type="text/javascript">
       $("#showError").bind('click',function(){
           $(".show").show();
           $(".aaa").show();
           //$("body").addClass("fli");

       })
       $("#test").bind('click',function(){
           alert(11111);
       })

       $("#close").bind('click',function(){
           $(".show").hide();
           $(".aaa").hide();
       })
   </script>
</html>