0

当我单击注册按钮时，弹出窗口打开......它在桌面上工作正常但是当我缩小浏览器窗口时，弹出窗口移动到浏览器的左角.....\在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>
4

2 回答 2

0

您的模态窗口将需要不同的样式

我在我的项目中使用它

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

这就是为什么它走出窗外，你必须styles为smaller screens.

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

这是一个很好的链接

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

于 2013-03-12T22:22:36.957 回答
0

我知道这一直是通过使用来关注的，@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();
});
于 2013-03-12T22:30:05.633 回答