如何解决确保弹出对话框弹出,无论用户页面位于何处?
嗨,我拥有以下具有当前功能的Iframe和CSS,当我拥有一个网页时,其内容非常长,并且用户单击了“反馈”按钮,对话框会在页面顶部弹出,而不是在用户位置的任何地方在页面上,我想知道如何确保无论用户位于页面上的何处都弹出对话框?
我们可以通过CSS实现吗?请寻求帮助?
<div id="MfpEmbed_Popup" style="width: 480px; height: 600px;"><div id="mfpembed_iconDiv"><img <iframe src=""id="MfpEmbed_Popup_Iframe"></iframe></div>
#MfpEmbed_Popup {
z-index: 1000001;
opacity: 1;
position: absolute;
left: 50%;
top: 50%;
border-radius: 2px;
background-color: white;
box-shadow: 0 2px 4px 0 rgba(0,0.20);
transform: translate(-50%,-50%);
解决方法
您应该改变
position: absolute;
到
position: fixed;
此更改将确保在用户位于页面上的任何位置都弹出对话框。该对话框将位于页面中间。
,您需要将position: absolute
更改为position: fixed
,并将顶部设置为0。
(最好以全屏方式打开代码段)
function open_popup(){
var div = document.getElementById("MfpEmbed_Popup");
div.style.opacity = "1";
}
#MfpEmbed_Popup {
z-index: 1000001;
opacity: 0;
position: fixed;
left: 50%;
top: 0;
border-radius: 2px;
background-color: white;
box-shadow: 0 2px 4px 0 rgba(0,0.20);
transform: translate(-50%,-50%);
<div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div><div><p>a long page</p></div>
<div style="position:fixed; right:0; bottom:0; z-index:1000000"><button onclick="open_popup()">click me to open popup</button></div>
<div id="MfpEmbed_Popup" style="width: 480px; height: 600px; z-index:10000"><div id="mfpembed_iconDiv">
<p style="color: black;">Dialog</p>
</div>
检查我制作的这个Codepen:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。