弹出层 代码

最新推荐文章于 2023-02-06 10:07:56 发布
最新推荐文章于 2023-02-06 10:07:56 发布
阅读量637 收藏
点赞数
文章标签： function scroll div c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshingheavy/article/details/5276425
版权

<html>
<head>
<script type="text/javascript">
var docEle = function()
{
    return document.getElementById(arguments[0]) || false;
}

function openNewDiv(_id)
{
    var m = "mask";
    if (docEle(_id)) document.body.removeChild(docEle(_id));
    if (docEle(m)) document.body.removeChild(docEle(m));
   
    //mask遮罩层

    var newMask = document.createElement("div");
    newMask.id = m;
    newMask.style.position = "absolute";
    newMask.style.zIndex = "1";
    _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
    _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    newMask.style.width = _scrollWidth + "px";
    newMask.style.height = _scrollHeight + "px";
    newMask.style.top = "0px";
    newMask.style.left = "0px";
    newMask.style.background = "#33393C";
    newMask.style.filter = "alpha(opacity=40)";
    newMask.style.opacity = "0.40";
    document.body.appendChild(newMask);
   
    //新弹出层

    var newDiv = document.createElement("div");
    newDiv.id = _id;
    newDiv.style.position = "absolute";
    newDiv.style.zIndex = "9999";
    newDivWidth = 400;
    newDivHeight = 200;
    newDiv.style.width = newDivWidth + "px";
    newDiv.style.height = newDivHeight + "px";
    newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
    newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
    newDiv.style.background = "#EFEFEF";
    newDiv.style.border = "1px solid #860001";
    newDiv.style.padding = "5px";
    newDiv.innerHTML = "弹出层内容 ";
    document.body.appendChild(newDiv);
   
    //弹出层滚动居中

    function newDivCenter()
    {
        newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
        newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
    }
    if(document.all)
    {
        window.attachEvent("onscroll",newDivCenter);
    }
    else
    {
        window.addEventListener('scroll',newDivCenter,false);
    }
   
    //关闭新图层和mask遮罩层

    var newA = document.createElement("a");
    newA.href = "#";
    newA.innerHTML = "关闭";
    newA.onclick = function()
    {
        if(document.all)
        {
            window.detachEvent("onscroll",newDivCenter);
        }
        else
        {
            window.removeEventListener('scroll',newDivCenter,false);
        }
        document.body.removeChild(docEle(_id));
        document.body.removeChild(docEle(m));
        return false;
    }
    newDiv.appendChild(newA);
}
</script>
</head>
<body>
<a οnclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a οnclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a οnclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
</body>
</html>

sunshingheavy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
封装的原生javascript弹出层代码
10-28
最近抽空余的时间写了个弹出层的插件，功能不算强大，当练手，以下为示例代码。
点击文字弹出一个DIV层窗口代码
07-15
点击文字弹出一个DIV层窗口代码,下载就能用
css弹出层代码分享
09-25
css弹出层代码分享，大家参考使用吧
BootStrap 弹出层代码
08-31
主要介绍了BootStrap 弹出层代码的相关资料,非常补充，具有参考借鉴价值，需要的朋友可以参考下
JS弹出层源代码
07-28
最简单实用的弹出层，已经封装，注释详细，方便调用。
弹出层
weixin_34404393的博客
12-09 115
<script type="text/javascript">var docEle = function() { return document.getElementById(arguments[0]) || false;} function openNewDiv(_id) { var m = "mask"; if (docEle(_id)) document.bo...
jquery弹出层代码
djz917的博客
05-02 902
html+CSS部分：&lt;div class="box"&gt;&lt;/div&gt;&lt;!--演示主体盒子--&gt; &lt;div class="layer"&gt;&lt;!--弹出层盒子--&gt; &lt;div class="icon"&gt;&lt;!--弹出层点击框--&gt; &lt;sp
fastadmin两种自定义弹出层/弹出框宽高/大小的方法
hzhairuntao的博客
11-30 9080
第一种，在表格里面点击按钮触发的弹出层，这是在js文件添加按钮，然后点击触发弹出层。 自定义弹出层的代码如下： 如图，我是在表格中新加来一个“二维码”的按钮，用来点击触发弹出层，自定义弹出层大小需要添加参数： extend:'data-area=["860px","730px"]', 依次是 宽 和 高 { field: 'buttons', width: "120px..
html 弹出层 特效代码,jquery实现简单实用的弹出层效果代码
weixin_39875167的博客
06-04 238
本文实例讲述了jquery实现简单实用的弹出层效果。分享给大家供大家参考。具体如下：目前来说，我还是喜欢这个自己改造的弹出层，在项目中用的也是这个。引入了新版的jquery插件，方框及文字都可以自己定义，非常方便，希望大家也喜欢这款弹出层，JavaScript在本例中也充分发挥了作用，对学习JS也是不错的参考。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w...
html弹窗隐藏,JS弹出层的显示与隐藏示例代码
weixin_29868343的博客
06-03 483
//弹出层的显示//overlays:为遮罩层的ID//wins:弹出层窗体的ID//弹出层中用于拖动的IDfunction popDIV_show(overlays,wins,wins_title) {var oLays = documentgetElementById(overlays);var oWins = documentgetElementById(wins);var oWins_ti...
jQuery弹出层代码
06-10
这是一款全手写的非插件jQuery弹出层代码，点击遮罩背景弹出层窗口，当然还可以关闭。
jQuery带步骤流程弹出层代码.zip
07-04
jQuery带步骤流程弹出层代码是一款点击弹出遮罩层，操作窗口带步骤流程表单内容填写，上一步下一步表单完成代码。 jQuery带步骤流程弹出层代码 截图
jQuery制作多种弹出层效果代码.zip
07-04
jQuery制作多种弹出层效果代码是一款基于Drop.js插件实现的下拉弹出层特效。
如何查看弹出窗口的源代码
herb777的专栏
05-04 4512
在实际开发中，会用到弹出窗口，但是一旦报错，往往不能直接看到弹出窗口的源代码，对调试造成极大不便，以下是一种查看弹出窗口源代码的方法，亲测有效！ 在jsp页面上添加如下代码： 在弹出窗口中点击‘保存’按钮即可获得窗口代码。
分享123个JS特效弹出层，总有一款适合您
zy0412326的专栏
02-06 1216
JS
html、css 实现网页弹出层
热门推荐
Zhangguohao666的博客
12-05 1万+
只使用html、css，一步步教你实现网页弹出登录窗口
弹出层代码
weixin_34010949的博客
10-30 149
<!doctype html><html><head><meta charset="utf-8"><title>点击弹出层-点击关闭</title><style>.black_overlay { display: none; position: absolute; top: 0%; left: 0%; width:...
K8s 很难么？带你从头到尾捋一遍，不信你学不会
民工哥的博客
02-23 8681
点击关注公众号，回复“1024”获取2TB学习资源！为什么要学习 Kubernetes?虽然 Docker 已经很强大了，但是在实际使用上还是有诸多不便，比如集群管理、资源调度、文件管理等...
10天智能锁项目实战第1天（了解单片机STM32F401RET6和C语言基础）
北豼不太皮的博客
02-21 3067
10天智能锁项目实战第1天（了解单片机STM32F401RET6和C语言基础）一、学习目标二、了解单片机STM32F401RET6三、C语言基础 一、学习目标 二、了解单片机STM32F401RET6 4、STM32F401RE特征 三、C语言基础 1.数据类型 常用2的次方： 2^7 = 128 2^8 = 256 2^15 = 32768 2^16= 65536 51单片机常见的数据类型： char: 占内存1字节 取值范围：-128~127 -2^7 ~ 2
vue3弹出层代码实现
最新发布
04-25
Vue3 弹出层可以通过下面的代码实现： 1. 在父组件中，定义一个变量 `showModal` 来表示是否显示弹出层，并绑定到弹出层组件的 `v-model` 上。 ``` 打开弹出层 <modal v-model="showModal">Hello World ...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值