javascript - Changing Height and width of modal dynamically when browser screen resolution changes - Stack Overflow

admin管理员组

文章数量:1429064

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

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

• javascript
• jquery
• html
• simplemodal

Share Improve this question Follow asked Jan 12, 2013 at 5:12 Vignesh GopalakrishnanVignesh Gopalakrishnan 1,99299 gold badges3232 silver badges5353 bronze badges 17

• You want to dynamically change the width and height of the modal when the window is zoomed in and out? – dunli Commented Jan 12, 2013 at 5:42
• Obviously you are right. – Vignesh Gopalakrishnan Commented Jan 12, 2013 at 5:47
• Have you tried capturing the event when the window is resized? Like $(window).resize(function(){ //Scale the width and height of modal }); – dunli Commented Jan 12, 2013 at 5:49
• No. I am just capturing the screen width and height. – Vignesh Gopalakrishnan Commented Jan 12, 2013 at 5:52
• The screen width is different from the window width. Screen width is taken from the monitors resolution. – dunli Commented Jan 12, 2013 at 5:56

 |  Show 12 more ments

2 Answers 2

Sorted by: Reset to default 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.

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

本文标签：