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

You want to dynamically change the `width` and `height` of the modal when the window is zoomed in and out? — dunli, Jan 12 '13 at 05:42
Have you tried capturing the event when the window is resized? Like `$(window).resize(function(){ //Scale the width and height of modal });` — dunli, Jan 12 '13 at 05:49
The `screen` `width` is different from the `window` `width`. Screen width is taken from the monitors resolution. — dunli, Jan 12 '13 at 05:56
Can you setup a [jsfiddle](http://jsfiddle.net)? So that it would be easy for me to help you. — dunli, Jan 12 '13 at 06:01
http://vignesh.gvignesh.org/test/sample_modal/ This is a model of modal. just take a look. — Vignesh Gopalakrishnan, Jan 12 '13 at 06:04
can download the content there and test it in your environment itself. I dont know how to setup a simplemodal in fiddle. — Vignesh Gopalakrishnan, Jan 12 '13 at 06:05
You would like your modal to take the whole screen of the browser? — dunli, Jan 12 '13 at 06:19
Yes. I am trying to hide the original screen meanwhile loading this modal until original content loads completely. — Vignesh Gopalakrishnan, Jan 12 '13 at 06:21
Hi, I'm in the resizing part yet. You may want to start from [here](http://jsfiddle.net/DqBKQ/6/). — dunli, Jan 12 '13 at 06:44
in JsFiddle itis working fine. at the same time when i copy same code and try it in my system, it fails. — Vignesh Gopalakrishnan, Jan 12 '13 at 07:04

dunli · Accepted Answer · 2013-01-12T07:29:40.100

3

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.

edited Jan 12 '13 at 07:29

answered Jan 12 '13 at 07:02

dunli

1,356
9
18

Hey really woking super in fiddle. Lot of thanks for you help. – Vignesh Gopalakrishnan Jan 12 '13 at 07:13
One more dunil. Can we disable browsers scroll bar when this modal loads? – Vignesh Gopalakrishnan Jan 12 '13 at 07:31
1

[This](http://stackoverflow.com/questions/3656592/programmatically-disable-scrolling) might help. – dunli Jan 12 '13 at 07:36

score 1 · Answer 2 · answered Jan 12 '13 at 07:12

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

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

2 Answers2