滚动条弹窗固定位置显示

背景描述:

你有一个列表,都是按钮,用来显示一个弹窗的明细或者报表

问题是这个页面时一个有纵向滚动条的页面,而且嵌在一个iframe里面

问题来了,你点击不同的按钮,弹窗位置不一样。真山寨。


可以这样不那么复杂的方式解决:

我这里用多个是bootstrap的modal

你的把你的modal设置成这样:

<div class="modal hide fade" id="host_chart"  style="min-width: 850px;position:fixed;">//position:fixed

JS 显示modal的时候,这样做就可以了;

 var chart_ = $('#host_chart');
        chart_.modal('show');//显示modal窗口
        var scrolltop = $(parent.document).scrollTop();//父类滚动条高度 
          chart_.css('top',scrolltop+'px');//就是你滚动了多少px你top设定加上去

可以通过scrolltop-40 等进行微调

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用CSS和JavaScript来创建一个带有滚动条弹窗。 首先,你需要创建一个HTML元素作为弹窗的容器,例如: ```html <div class="popup-container"> <div class="popup-content"> <!-- 弹窗内容 --> </div> </div> ``` 接下来,你需要使用CSS来设置弹窗容器的样式: ```css .popup-container { position: fixed; /* 固定位置 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */ display: flex; justify-content: center; align-items: center; z-index: 9999; /* 设置层级 */ } .popup-content { max-width: 90%; /* 弹窗最大宽度 */ max-height: 90%; /* 弹窗最大高度 */ overflow-y: auto; /* 垂直滚动条 */ background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } ``` 最后,你需要使用JavaScript来控制弹窗显示和隐藏: ```javascript const popupContainer = document.querySelector('.popup-container'); const popupContent = document.querySelector('.popup-content'); function showPopup() { popupContainer.style.display = 'flex'; } function hidePopup() { popupContainer.style.display = 'none'; } // 点击按钮显示弹窗 document.querySelector('.open-popup-btn').addEventListener('click', showPopup); // 点击弹窗外部或关闭按钮隐藏弹窗 popupContainer.addEventListener('click', (event) => { if (event.target === popupContainer) { hidePopup(); } }); document.querySelector('.close-popup-btn').addEventListener('click', hidePopup); ``` 这样,你就可以创建一个带有滚动条弹窗了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值