彈出使其中心

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

你將需要不同風格的模式窗口

我用這個在我roject

@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，我做到了在檢查元素鉻和調整時，它沒有效果不錯，但可能工作，如果你會做你的本地計算機上，試試這個太。如果沒有，請進入@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(); 
});