天天看点

弹出div浮动登陆框 背景变灰

<!--要浮动的框子-->
            <div class="quitOKorNo" id="quitOKorNo" >
                  
            </div>
           
.quitOKorNo{ display:none; position:absolute;  background-color:White;    z-index:200;width:200px; border:1px #F8CFA5 solid; font-size:12px; height:50px; color:Black; line-height:50px; text-align:center}
           
#greybackground { background:#000; display:block; z-index:100; width:100%; position:absolute; top:0; left:0;}
           
$("#quitOKorNo").html("打开弹出框和设置背景框!");
                                $("#quitOKorNo").fadeIn(100);
                                $("body").append("<div id='greybackground'></div>");
                                var documentheight = $(window.document).height();//获取此页面高度,包括下拉部分
                                $("#greybackground").css({"opacity":"0.3","height":documentheight});
           
//浮动框的效果 和位置设定js代码
           
var screenwidth,screenheight,mytop,getPosLeft,getPosTop
    screenwidth = $(window).width();
    screenheight = $(window).height();
    mytop = $(document).scrollTop();
    getPosLeft = screenwidth/2 - 100;
    getPosTop = screenheight/2 - 150;
    $("#quitOKorNo").css({"left":getPosLeft,"top":getPosTop+80});
    $(window).resize(function()
    {
        screenwidth = $(window).width();
        screenheight = $(window).height();
        mytop = $(document).scrollTop();
        getPosLeft = screenwidth/2 - 100;
        getPosTop = screenheight/2 - 150;
        $("#quitOKorNo").css({"left":getPosLeft,"top":getPosTop+mytop+80});
    });

    //滚动条事件
    $(window).scroll(function()
    {
        screenwidth = $(window).width();
        screenheight = $(window).height();
        mytop = $(document).scrollTop();
        getPosLeft = screenwidth/2 - 100;
        getPosTop = screenheight/2 - 150;
        $("#quitOKorNo").css({"left":getPosLeft,"top":getPosTop+mytop+80});
    });
           

继续阅读