1

次のコードがあります。

更新しました：

http://jsfiddle.net/Zdevq/2/

.container {
  height: 100%;
  width: 100%;
  background: #eee;
  position: absolute;

}

.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;

  /*Centering Method 2*/
  margin: -50px 0 0 -50px;
  left: 50%;
  top: 50%;
}

から: http://designshack.net/articles/css/how-to-center-anything-with-css/

== しかし、私が望むのは、モーダル ボックスがレスポンシブ コンテナー div に対して相対的な幅を持つことです。

response div で真にレスポンシブなモーダル ボックスを作成する方法はありますか?

4

2 に答える 2

3

あなたはそれを正しい方法で使用しませんでした.その関数は、最新のjqueryを使用して準備が整ったドキュメントで初期化する必要があります.

http://jsfiddle.net/n29up/1/

これはjQueryコードです。jquery を次のように使用します。

ただし、必ず最新のjqueryプラグインを追加してください

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
  $(function(){

    $.fn.center = function () {
         this.css("position","absolute");
         this.css("top", ( $(window).height() - this.height() ) / 2  + "px");
         this.css("left", ( $(window).width() - this.width() ) / 2 + "px");
         return this;
    }

    $(".box").center();   // on page load div will be entered                                               

    $(window).resize(function(){ // whatever the screen size this
         $(".box").center();       // this will make it center when
    });                          // window resize happens

  });
</script>

あなたの小さなupdated css:

.container {
    height: 100%;
    width: 100%;
    background: #eee;
    position: absolute;
}

.box {
   height: auto;
   width: 70%;
   background: gray;
   position: absolute;
   margin: 0;
   left:0;
   top:0;
}
于 2012-11-29T18:32:37.267 に答える
0

これはどう

フィドルをチェック

marginを箱から取り出し、コンテナの と を追加しましたmin-height。max-height

.container {
  height: 100%;
  width: 100%;
  background: #eee;
  position: absolute;
}

.box {
  height: auto;
  width: 70%;
  background: gray;
  position: absolute;
  /*Centering Method 2*/
  left: 15%;
  top: 45%;
}​
于 2012-11-29T18:06:34.090 に答える