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.