javascript - 弹出窗口使其居中

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 */
}

现在你有了模态的这个样式:

#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;}

这就是它离开窗口的原因，您必须为较小的屏幕编写其他样式。

我试图删除 margins 并将其设置为 margin: auto，我在 chrome 的 inspect element 中做了它，但在调整大小时效果不佳，但是如果您在本地计算机上执行此操作可能会起作用，也可以尝试一下。如果没有，请转到@media screen。

这里有一个很好的链接

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