2021/7/6

最新推荐文章于 2024-07-19 12:58:53 发布

panghu_bupang

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量125

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/panghu_bupang/article/details/118532545

版权

<html>
<head>
<meta charset="utf-8">
<style>
*{
padding:0;
margin:0;
}
.bjym{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    zoom: 1;
    z-index: 999;
    width:100%;
    height:100%;
  
}
.tck {
    display:none;
    background: #fff;
    float: right;
    padding: 6px;
    text-align: left;
    width: 400;
    height: 300;
    background: #ccc;
    overflow: auto;
    top: 0;
    left: 0;
    z-index: 9999999
    
}
.btn{
    width: 25px;
    height: 38px;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function show(){
    $(".bjym").css({"height":window.screen.availHeight});     // 属性声明了显示浏览器的屏幕的可用高度
    $(".bjym").show();
    // $(".zxh").hide();
 
    var st=$(document).scrollTop(); //页面滑动高度
    var objH=$(".tck").height();//浮动对象的高度
    var ch=$(window).height();//屏幕的高度  
    var objT=Number(st)+(Number(ch)-Number(objH))/2;   //思路  浮动高度+（（屏幕高度-对象高度））/2
    $(".tck").css("top",objT);
     
    var sl=$(document).scrollLeft(); //页面滑动左移宽度
    var objW=$(".tck").width();//浮动对象的宽度
    var cw=$(window).width();//屏幕的宽度  
    var objL=Number(sl)+(Number(cw)-Number(objW))/2; //思路  左移浮动宽度+（（屏幕宽度-对象宽度））/2
    $(".tck").css("left",objL);
    $(".tck").slideDown("20000");//这里显示方式多种效果
}
// function closeDiv(){
//     $(".bjym").hide();
//     $(".tck").hide();
// }
function zxh(){
    $(".tck").hide();
}

</script>
</head>
<body>
    <!-- onclick="closeDiv() -->
<div class="bjym" >   
    <button onclick="show()" class="btn">点我弹出遮罩层</button>
    <span>
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </span> <span>
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </span> <span>
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </span> <span>
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </span> <span>
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </span> 
</div>
     <!-- 下面就是弹出的遮罩层 -->
<div class="tck">   
    <div>
        <h3>我是客服</h3>

        <span onclick="zxh()">时间函数</span>
    </div>
    <!-- 一左一右开始聊天 -->
    <div>

    </div>
</div>
</body>
</html>

panghu_bupang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021/7/6

<html><head><meta charset="utf-8"><style>*{padding:0;margin:0;}.bjym{ position: fixed; left: 0; top: 0; width: 100%; zoom: 1; z-index: 999; width:100%; height:100%; }.tck { display:non
复制链接

扫一扫

2021/7/6

“相关推荐”对你有帮助么？