Javascript 弹出窗口使其成为中心

当我点击注册按钮时，弹出窗口打开。。。。 它在桌面上运行良好，但当我缩小浏览器窗口时，弹出窗口会移动到浏览器的左角\ 如何在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>

-->

模式窗口需要不同的样式

我在我的项目中使用这个

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

这就是为什么它不在窗口中，您必须为

较小的屏幕编写其他
样式

我试图删除
页边距
并将其设置为
页边距：auto
，我在chrome的inspect元素中执行了该操作，但在调整大小时效果不佳，但如果您在本地机器上执行该操作，也可以尝试此操作。如果没有，请转到@media screen

这里有一个很好的链接

我知道这是通过使用
@media screen
来关注的，但是当您在问题中标记jQuery时，我想我会给出另一种解决方案。也许对你所追求的有点过分。。。但是，嘿，我喜欢它，它很管用。此外，它还省去了为屏幕大小添加多个媒体查询的麻烦

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

请提供相关的javascript和CSS。请删除所有不需要重现问题的代码；然后添加所用类的定义。否则，你的问题真的很难回答！将“margin:auto；”应用于query@media（最大宽度：767px）上的“myModal”div元素，该元素已在您的页面上使用chrome开发工具进行了测试……您能分享您的小提琴吗link@user2045025我没有在Fiddle中这样做，但在您的站点上进行了现场测试，只需将整个脚本复制到您的web控制台中，它就会工作并覆盖所有css样式。给我两分钟，我来拉小提琴谢谢你能帮我吗