Question

I have the following code:

UPDATED:

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

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

== BUT what I want is the modal box to have a width relative to the responsive container div.

Is there any way to make a truly responsive modal box in a response div ?

Answer 1

You did not use it in correct way, that function has to be initialized on doc ready with use of latest jquery.

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

This is the jQuery code-
use the jquery this way:

but make sure to add the latest jquery plugin

<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>

your little 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;
}