Changing Height and width of modal dynamically when browser screen resolution changes

Question

I was working on a jquery simple modal. I am trying to load it- on-load and after some 15 Sec it will close automatically. So what i cannot achieve is if i am setting a width and height to that modal and if the users browser screen resolution changes([ ctrl(+) ]or[ ctrl(-) ]) the size of the modal will varies. So i tried to catch the user's screen resolution using screen.width and screen.height and assigning that width to that modal. But it is messing up i don't know why. Here is the demo link of what i am trying to do. This is my jquery code i am using.

<script>
$(document).ready(function() {
    (function () {
    var width = screen.width,
        height = screen.height;
    setInterval(function () {
        if (screen.width !== width || screen.height !== height) {
            width = screen.width;
            height = screen.height;
            $(window).trigger('resolutionchange');
        }
    }, 50);
}());
$.modal($("#basic-modal-content"));
$("#simplemodal-container").width(screen.width);
$("#simplemodal-container").height(screen.height);  
});
setTimeout(function() { 
$.modal.close();
}, 15000);

</script>

The actual thing is i am trying to hide my screen and put an ad in the modal until the page loads. Hope my question is clear. Thank you in Advance !!

Answer 1

I have here an update in jsfiddle .

I have added this:

modal.css({
  width: w + ($(window).width() - w),
  height: h + ($(window).height() - h)
});

to your script. The good thing is that the modal is occupying the whole screen, on the other hand when the window is resized the border (green) will be gone, only the contents of the modal are shown.

But it will be a good start for you.

UPDATE:

I've updated the jsfiddle here .

Hope it helps.

Answer 2

<script>

    $(document).ready(function() {
        (function () {
        var width = screen.width,
            height = screen.height;
        setInterval(function () {
            if (screen.width !== width || screen.height !== height) {
                width = screen.width;
                height = screen.height;
                $(window).trigger('resolutionchange', width, height);
            }
        }, 50);
    }());
    $.modal($("#basic-modal-content"));
    $("#simplemodal-container").width(screen.width);
    $("#simplemodal-container").height(screen.height);  
    });

    $(window).on('resolutionchange', function(width, height){
        $("#simplemodal-container").width(width);
        $("#simplemodal-container").height(height); 

       //you also need to set position left:0 and top:0;
    });

    setTimeout(function() { 
    $.modal.close();
    }, 15000);

</script>

but i suggestion to use this way, because you want fill browser window

#simplemodal-container {
   left:0;
   top:0;
   width:100%;
   height:100%;
   position:fixed;
} 

<script type="text/javascript">
    setTimeout(function(){
      $('#simplemodal-container').fadeOut();
    },1500);
</script>

or in other way [your solution]:

<script>

    $(function() {

       var width = screen.width,
            height = screen.height;

       $.modal($("#basic-modal-content"));
       $("#simplemodal-container").width(width).height(height).css({top:0,left:0});

       $(window).resize(function(){
            width = screen.width;
                height = screen.height;
                $(window).trigger('resolutionchange', width, height);
       });


       $(window).on('resolutionchange', function(width, height){
          $("#simplemodal-container").width(width).height(height).css({top:0,left:0});
          //if you have padding for modal, remove it
       });

       setTimeout(function() { 
          $.modal.close();
       }, 15000);

    });

</script>