Динамическое изменение высоты и ширины модального окна при изменении разрешения экрана браузера

Я работал над простым модальным jquery. Я пытаюсь загрузить его - при загрузке, и через 15 секунд он автоматически закрывается. Итак, чего я не могу достичь, так это того, что если я устанавливаю ширину и высоту для этого модального окна, и если разрешение экрана браузера пользователей изменяется ([ctrl(+)] или [ctrl(-)]), размер модального окна будет меняться. Поэтому я попытался поймать разрешение экрана пользователя, используя screen.width и screen.height и назначив эту ширину этому модальному модулю. Но это беспорядок, я не знаю, почему. Вот демонстрационная ссылка того, что я пытаюсь сделать. Это мой код jquery, который я использую.

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

На самом деле я пытаюсь скрыть свой экран и разместить рекламу в модальном окне, пока страница не загрузится. Надеюсь, мой вопрос понятен. Заранее спасибо !!


javascript html jquery simplemodal
person Vignesh Gopalakrishnan    schedule 12.01.2013    source источник
comment
Вы хотите динамически изменять width и height модального окна при увеличении и уменьшении масштаба окна?   -  person dunli    schedule 12.01.2013
comment
Очевидно, вы правы.   -  person Vignesh Gopalakrishnan    schedule 12.01.2013
comment
Вы пытались зафиксировать событие при изменении размера окна? Нравится $(window).resize(function(){ //Scale the width and height of modal });   -  person dunli    schedule 12.01.2013
comment
Нет. Я просто фиксирую ширину и высоту экрана.   -  person Vignesh Gopalakrishnan    schedule 12.01.2013
comment
screen width отличается от window width. Ширина экрана берется из разрешения монитора.   -  person dunli    schedule 12.01.2013
comment
Хорошо, попробую с вашими предложениями.   -  person Vignesh Gopalakrishnan    schedule 12.01.2013
comment
window.width не работает @dunli.   -  person Vignesh Gopalakrishnan    schedule 12.01.2013
comment
Можете ли вы настроить jsfiddle? Чтобы мне было легко тебе помочь.   -  person dunli    schedule 12.01.2013
comment
vignesh.gvignesh.org/test/sample_modal Это модель модального окна. просто взгляните.   -  person Vignesh Gopalakrishnan    schedule 12.01.2013
comment
Вы можете скачать оттуда контент и протестировать его в своей среде. Я не знаю, как настроить простой мод в скрипте.   -  person Vignesh Gopalakrishnan    schedule 12.01.2013
comment
Я готов. Возможно, это займет время.   -  person dunli    schedule 12.01.2013
comment
Хорошо. Я просто жду. среднее время я тоже пытаюсь.   -  person Vignesh Gopalakrishnan    schedule 12.01.2013
comment
Вы хотите, чтобы ваше модальное окно занимало весь экран браузера?   -  person dunli    schedule 12.01.2013
comment
да. Я пытаюсь скрыть исходный экран, загружая этот модальный режим, пока исходный контент не загрузится полностью.   -  person Vignesh Gopalakrishnan    schedule 12.01.2013
comment
Привет, я еще в части изменения размера. Вы можете начать с здесь.   -  person dunli    schedule 12.01.2013
comment
Спасибо @dunli, я изучаю это.   -  person Vignesh Gopalakrishnan    schedule 12.01.2013
comment
в JsFiddle это работает нормально. в то же время, когда я копирую тот же код и пробую его в своей системе, он терпит неудачу.   -  person Vignesh Gopalakrishnan    schedule 12.01.2013
comment
Можете ли вы опубликовать ссылку на вашу рабочую копию в вашей системе?   -  person dunli    schedule 12.01.2013

Ответы (2)


arrow_upward
3
arrow_downward

У меня есть обновление в jsfiddle.

Я добавил это:

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

к вашему сценарию. Хорошо то, что modal занимает весь экран, с другой стороны, когда размер окна изменяется, граница (зеленая) исчезает, отображается только содержимое модального окна.

Но это будет хорошим началом для вас.

ОБНОВИТЬ:

Я обновил jsfiddle здесь.

Надеюсь, поможет.

person dunli    schedule 12.01.2013
comment
Эй, действительно проснулся супер на скрипке. Большое спасибо за помощь. - person Vignesh Gopalakrishnan; 12.01.2013
comment
Еще один дунил. Можем ли мы отключить полосу прокрутки браузера при загрузке этого модального окна? - person Vignesh Gopalakrishnan; 12.01.2013
comment
Это может помочь. - person dunli; 12.01.2013

arrow_upward
1
arrow_downward 

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

но я предлагаю использовать этот способ, потому что вы хотите заполнить окно браузера

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

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

или другим способом [ваше решение]:

<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>
person Hadi Mostafapour    schedule 12.01.2013