Question

我有一个隐藏的div，当点击Rate Quote按钮时，它变成一个模态类型的窗口。它似乎在我的笔记本电脑上运行良好，但它在我的ipad 2上没有正确定位。在横向时，它根本不显示。在纵向时，它显示在页面底部，低于其余内容。

我不确定发生了什么。这是我正在使用的 javascript ：

function openquote(){
var w = 425;
var h = 350;
myleft = (window.screen.width)?(window.screen.width-w)/2:100;
mytop = (window.screen.height)?(window.screen.height-h)/4:100;
window.document.getElementById('quotediv').style.marginTop = mytop + 'px';
window.document.getElementById('quotediv').style.marginLeft = myleft + 'px';
window.document.getElementById('overlay').style.display = 'block';
window.document.getElementById('quotediv').style.display = 'block';

CSS是：

#quotediv {
display:none;
z-index:99;
height:338px;
width:323px;
position:fixed;
border-radius:10px;
border:2px solid #FFF;
box-shadow: 2px 2px 4px #989898;
background-color:#8b0202;
}

您可以在http://www.ntxprospec.com/services.html

查看该页面

感谢您的帮助。

Answer 1

我在浏览器上测试了页面并调整了大小，直到它突然从屏幕上消失，因此我能够在浏览器中重现该问题。当我将您的margin-top和margin-left改为top和left时，问题就消失了。缺点是即使模态变得可见，模态也不会居中，并且使用JavaScript来使元素居中实际上有点矫枉过正。我建议this post on CSS Tricks如何用CSS做同样的事情。如果您使用该方法，那么您需要使用JavaScript函数进行显示/隐藏。

在ipad上重新定位隐藏的div

1 个答案: