如何让手写的模态窗始终保持弹出在屏幕正中间

最新推荐文章于 2024-09-13 13:17:01 发布

前端先疯队

最新推荐文章于 2024-09-13 13:17:01 发布

阅读量1.4k

点赞数

分类专栏：前端基础文章标签：模态窗屏幕正中

本文链接：https://blog.csdn.net/CheckMate_Room/article/details/83987823

版权

前端基础专栏收录该内容

22 篇文章 0 订阅

订阅专栏

首先进行模态窗的编写

<div class="btns" id="btns" style="display:none;">
        <div class="overLay" id="overLay" onclick="motaiHide()" style="position: fixed;width: 100%;height: 100%;top: 0;left: 0;opacity: 0.5;background-color: #000000;z-index: 100000;"></div>
        <div style="width:200px;height: 80px;position: absolute;left: 50%;top: 50%;margin-left: -100px;z-index: 100001;background: #ffffff;padding: 10px;border-radius: 8px;">
            <p id="toName" style="margin-bottom:15px;font-size:14px;font-weight:500;color: #888;">TO:xxx</p>
            <span style="font-size:13px;color:white;background:#337ab7;padding: 5px;border-radius: 5px;margin-right: 4px;">拨打电话</span>
            <span style="font-size:13px;color:white;background:#337ab7;padding: 5px;border-radius: 5px;margin-right: 4px;">发送短信</span>
            <span style="font-size:13px;color:white;background:#337ab7;padding: 5px;border-radius: 5px;" onclick="message()">留言</span>
        </div>
</div>

overLay是模态窗背后的蒙版，下面的div为模拟的内容，下面就是最精髓的一串代码；

var top = ($(window).height() - $(divName).height())/2;   
var left = ($(window).width() - $(divName).width())/2;   
var scrollTop = $(document).scrollTop();   
var scrollLeft = $(document).scrollLeft();   
$(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();