JS悬浮窗口如何实现

html-css019

JS悬浮窗口如何实现,第1张

jsp中:

<body>

<div style="position: absolutez-index:90" id="div1">我不动</div>

<div>我动<div>

</body>

//有的将position设置成fixed,我试了试效果不如position好,设置z-index,向里的深度,我这儿设置90,你要覆盖几个div,设置数大于那个数就行。

js中:

我这儿用jquery写。

$(document).ready(function(){

$(window).scroll(function(){//滚动时触发函数

$("#div1").css("top",$(document).scrollTop())//将滚动条高度赋给悬浮框。

})

})

导入jquery库,效果就出来了。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jQuery EasyUI</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery.min.js"></script>

    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

    <script>

    

         $(function(){

            $('#win').window({   

                width:600,   

                height:400,               

                modal:true  

            })               

        })

        

    </script>

</head>

<body>    

    <div id="win" class="easyui-window" title="界面弹窗">

        你好啊!苍老师.

    </div>

</body>

</html>