用jquery实现遮罩层，模拟模式对话框，总不成功！

本帖最后由 java__net 于 2010-07-05 23:27:46 编辑

解决方案 »

  1.   


            jQuery(
                function(){
                    jQuery(".btn").click(
                        function(){
                            jQuery("body").append("<div class='DivMask'><iframe border='0' width='100%' height='100%' marginheight='0' marginwidth='0' scrolling='no'></iframe></div>");
                            SetCss();
                        }
                    )
                }
            );
            
            function SetCss(){
                jQuery('.DivMask').css(
                    {
                        height:document.body.clientHeight,
                        width:document.body.clientWidth,
        opacity:50,//jquery透明直接opacity,filter本就ie
                        top:"0px",
                        left:"0px",
                        zindex:900 //zindex no z-index
                    }
                );
            }
      

  2.   

    jquery规定 带-都要用引号框起来  "z-index":900 
      

  3.   


    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Untitled Document</title>
            <script src="jquery.js" type='text/javascript'></script>
            <script>
            jQuery(function(){
                    jQuery(".btn").click(
                        function(){
                            jQuery("body").append("<div class='DivMask'><iframe border='0' width='100%' height='100%' marginheight='0' marginwidth='0' scrolling='no'></iframe></div>");
                            SetCss();
                        }
                    )
            });
            
            function SetCss(){
                jQuery('.DivMask').css(
                    {
                        height:document.body.clientHeight,
                        width:document.body.clientWidth,
                        "background-color": "#CCCCFF",
                        opacity:10,//兼容
                        top:"0",
                        left:"0",//0就不要px了
                        position: "absolute",//这样就不会在按钮下面了
                        "z-index":900 //这句报错，不知道为什么“after property id”，
                            //css属性中带“-”的，一律用引号"z-index"/"background-color"
                    }
                );
            }
        </script>
        </head>
        <body>
            <input id="button" type="button" class="btn" value="OK"/>
        </body>
    </html>