弹出使其居中

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

这就是它出窗外的原因，您必须为smaller screens写其他styles。

我尝试删除 margins 并将其设置为 margin: auto，我在 chrome 的检查元素中进行了此操作，但在调整大小时效果不佳，但如果您在本地计算机上执行此操作，则可以使用，也试试这个。如果没有，请转到@media screen。

这是一个很好的链接

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();
});