摘要：当弹框弹出时原页面内容不能滚动，即将样式设为原页面的内容就不会动了当弹框关闭后再将样式改为默认的中的写一个函数，再在弹框的中调用函数。
html结构比较简单，即：
遮罩层弹框
先写覆盖显示窗口的遮罩层div.box，因为要在整个窗口显示固定，所以position要设为fixed，background设为灰色半透明，由于要遮住整个显示屏，width和height都设为100%(body和html的width和height也都设为100%);
在遮罩层的div.box里写弹框的div.container，位置相对于父级定位
HTML:
1 <div> 2 <button class="open">点我弹出弹框button> 3 div> 4 <div class="box"> 5 <div class="container"> 6 <button class="close">关闭弹框button> 7 div> 8 div>
CSS:
1 html, body { 2 width:100%; 3 height:100%; 4 } 5 .box { 6 display: none; 7 width: 100%; 8 height: 100%; 9 position: fixed; 10 top: 0; 11 left: 0; 12 background: rgba(51,51,51,0.5); 13 z-index: 3;//根据自己页面情况设置 14 } 15 .container { 16 width: 500px; 17 height: 200px; 18 position: absolute; 19 top: 50%;//以下3行设置弹框居中页面，根据自己页面情况选择 20 left: 50%; 21 transform: translate(-50%, -50%); 22 background: #fff; 23 z-index: 5;//根据自己页面情况设置 24 }
JavaScript:
1 $(document).ready(function(){ 2 $(".open").click(function(){ 3 $(".box").show(); 4 }) 5 $(".close").click(function(){ 6 $(".box").hide(); 7 }) 8 })
弹框内容需要滚动一定是内容超出弹框的高度，所以要给弹框内想滚动的部分设overflow: auto;
然后是Jq实现部分。当弹框弹出时原页面内容不能滚动，即将body样式设为overflow: hidden;原页面的内容就不会动了；当弹框关闭后再将body样式改为默认的overflow: auto;
2中的JS写一个函数，再在弹框的JQ中调用函数。
CSS:
.container中增加一条
1 .container { 2 overflow: auto; 3 }
JavaScript:
1 function toggleBody(isPopup) { 2 if (isPopup) { 3 document.body.style.height = 100%; 4 document.body.style.overflow = hidden; 5 }else { 6 document.body.style.height = auto; 7 document.body.style.overflow = auto; 8 } 9 }
JQ中需要增加调用toggleBody()函数
1 $(".open").click(function(){ 2 $(".box").show(); 3 toggleBody(1);//增加部分 4 }) 5 $(".close").click(fundtion(){ 6 $(".box").hide(); 7 toggleBody(0);//增加部分 8 })
*有错误的地方欢迎指正
*转载请注明出处
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1254.html
摘要：移动端下弹框禁止背景滑动茴字写法有很多种，找到最适合的才是好的。 移动端下弹框禁止背景滑动 茴字写法有很多种，找到最适合的才是好的。 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $(html, body,.pa...
摘要：移动端下弹框禁止背景滑动茴字写法有很多种，找到最适合的才是好的。 移动端下弹框禁止背景滑动 茴字写法有很多种，找到最适合的才是好的。 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $(html, body,.pa...
摘要：无非就是获取用户输入的获取图片信息组装填充页面数据瀑布流布局处理在页面滚动时判断最后一张图片是否可见，如果是则重复以上内容查看源码 开始 做一个小项目，算是对js和jQuery的一次练习吧。 图片资源来自这个网站（上面有很多高清图片关键还是免费下载的）：https://unsplash.com/ 项目具体效果可以点这里：https://bjw1234.github.io/ima......
阅读 690·2023-04-25 19:43
阅读 3881·2021-11-30 14:52
阅读 3736·2021-11-30 14:52
阅读 3802·2021-11-29 11:00
阅读 3752·2021-11-29 11:00
阅读 3819·2021-11-29 11:00
阅读 3535·2021-11-29 11:00
阅读 6023·2021-11-29 11:00
