Question

当我点击注册按钮时弹出窗口打开.... 它在桌面上工作正常，但当我缩小浏览器窗口时，弹出窗口移动到浏览器的左上角..... 如何让弹出中心在iPhone ... 如何解决它......

在下方提供我的代码....

<div class="modal hide fade" id="signup-modal">
    <a class="close" data-dismiss="modal">&times;</a>
    <h1>Sign up </h1>
    <form method="POST" autocomplete="off" id="id_registerForm">
        <input type="hidden" name="usertype" value="3" readonly />
        <fieldset>      
        <input type="text" placeholder="Name" name="fullname" maxlength="30" required="required" id="id_username" />
        <input type="text" placeholder="Company" name="company" maxlength="30" required="required" id="id_company" />       
        <input type="email" placeholder="Email" name="email" maxlength="75" required="required" id="id_email" />
        <input type="password" placeholder="Password" name="password" required="required" id="id_password" />
        <input type="password" placeholder="Retype Password" name="repassword" required="required" id="id_repassword" />
        <textarea name="inquiry" placeholder="Inquiry" rows="3" required="required" id="id_inquiryForm" style="width:290px;"></textarea>
        <input id="id_signUp" type="button" value="Sign Up" class="btn">
        </fieldset>
        <!-- <a href="#myModal" role="button" data-toggle="modal"><span>Already have an account?</span> Log in</a> -->
    </form>
</div>

Answer 1

你的模态窗口需要不同的样式

我在我的项目中使用它

@media screen and (max-width: 650px){
   /* my styles goes here */
}

现在你有了modal的这种风格：

#signup-modal, #login-modal {
width: 300px;
padding: 0 40px;
background: #fff;
border: 5px solid rgba(0,0,0,0.2);
margin-left: -190px;
border-radius: 10px;
overflow: hidden;
margin-bottom: 40px;
box-shadow: 0 1px 0 white inset;
margin-top: -306px;}

这就是它离开窗户的原因，你必须为styles写下其他smaller screens。

我尝试删除margins并将其设置为margin: auto，我在chrome中的inspect元素中执行了此操作，但在调整大小时效果不佳，但如果您执行此操作则可以正常工作在你的本地机器上，试试这个。如果没有，请转到@media屏幕。

这是一个很好的链接

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

我知道这是通过使用@media-screen来关注的，但是当你在问题中标记jQuery时，我想我会提供另一种解决方案。对于你所追求的东西可能有点OTT ......但是我喜欢它并且它有效。此外，它还可以节省为屏幕尺寸添加多个媒体查询。

var sBox = $('#signup-modal');
var uPos = function(){
   //Get sign-up box height and width
   sBoxHeight = parseInt(sBox.css('height'));
   sBoxWidth = parseInt(sBox.css('width'));

   //Get window height and width
   wHeight = window.innerHeight;
   wWidth = window.innerWidth;

   //Work out the position for the sign-up box
   sBoxTop = (wHeight/2) - (sBoxHeight/2);
   sBoxLeft = (wWidth/2) - (sBoxWidth/2);

   //Apply to the sign-up box
   sBox.css({
      margin:'0px',
      left:sBoxLeft - 55,
      top:sBoxTop
   });
}

//Apply on page load
uPos();

//Apply when window is resized
$(window).resize(function(){
   uPos();
});

弹出使其成为中心

2 个答案: