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ますが、質問で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 に答える
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ましたが、クロムの検査要素で実行しましたが、サイズ変更時にうまく機能しませんでしたが、ローカルマシンで実行するとうまくいく可能性があります。これも試してください。そうでない場合は、@media スクリーンに移動します。

ここにこれに関する良いリンクがあります

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

于 2013-03-12T22:22:36.957 に答える