Создание модального диалога - исчезновение содержимого

#javascript #jquery #modal-dialog #lightbox

#javascript #jquery #модальный диалог #лайтбокс

Вопрос:

Я пытаюсь создать модальный диалог jquery. (пожалуйста, не говорите «использовать плагин»).

Я хорошо понимаю, что js, который я использую, — дерьмо, как только я попытаюсь взломать базовую функциональность, как только я отключу базовую функциональность, я перепишу это как плагин jquery для собственного использования.

В любом случае,

У меня появилось диалоговое окно, и оно находится в центре страницы, размер диалогового окна определяется его содержимым.

В этом конкретном примере содержимое имеет фиксированную ширину.

Я пытаюсь обработать случай, когда содержимое больше ширины страницы.

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

В чем может быть моя проблема?

Пример: http://jsbin.com/egowo3/edit
CSS:

 body {
  padding: 0;
  margin: 0;
  color: #fff;
}

#overlay {
  position:fixed;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  display: none;
}

#dialog {
  display: none;
  background: #000;
  border: 1px solid #0000ff;
  position: fixed;
  z-index: 99999;
}

#test {
  display: none;
  width: 1300px;
}

Javascript

 $(function(){
  $('button').click(function(){

    var body = $('body');
    var content = $('#test');
    var dialog = $('<div id="dialog"></div>');
    var overlay = $('<div id="overlay"></div>');

    var width = content.outerWidth(true);
    var height = content.outerHeight(true);

    body.prepend(dialog);
    body.prepend(overlay);
    dialog.prepend(content)
          .height(height)
          .width(width);

    content.show();


    var left = (overlay.width()/2)-(dialog.outerWidth()/2);
    var top = (overlay.height()/2)-(dialog.outerHeight()/2);

    dialog.css({
      left : left,
      top  : top
    });

    overlay.fadeIn('fast');
    dialog.fadeIn('fast');

    $(window).resize(function() {
      overlay = $('#overlay');
      dialog = $('#dialog');

      if(overlay.length == 0 || dialog.length == 0)
        return false;

      var left = (overlay.width()/2)-(dialog.outerWidth()/2);
    var top = (overlay.height()/2)-(dialog.outerHeight()/2);

    dialog.css({
      left : left,
      top  : top
    });

    });
  });
});

HTML

 <body>
  <button>Modal Me</button>
  <div id="test">
    <p>Pid ac lundium urna tempor vut, elementum adipiscing mauris, magna cum odio! Urna pulvinar, et egestas magna diam mus porttitor natoque urna nisi turpis amet sed, etiam penatibus, nascetur cras lectus auctor? Nisi, elementum ac dictumst facilisis nec elementum ac? Placerat adipiscing? Dis montes cursus sagittis etiam et tortor ridiculus.</p>
    <p>Nisi nec mid? Enim amet, enim rhoncus nisi penatibus nec, natoque amet placerat in in? Scelerisque magna, aliquam elit habitasse turpis parturient et facilisis urna adipiscing, porta hac nunc, sit pellentesque! In enim? Mus nunc risus amet sed tincidunt, hac placerat placerat diam, et et, sociis mid. Pellentesque, vel.</p>
  </div>
</body>

Ответ №1:

Это происходит потому, что вы используете position: fixed , который, я почти уверен, игнорирует границы страницы. Почему бы вам не сравнить ширину элемента с шириной страницы и не решить, какой курс действий предпринять оттуда?

 if($("#dialog").width() > $(window).width()){
alert("Content will overflow the window.");
}

Ответ №2:

Вы никогда не настраиваете ширину и высоту окна наложения при изменении размера, хотя вы устанавливаете его при инициализации. Следовательно, ваш CSS предполагает, что вы хотите сохранить свой блок такого размера. Попробуйте использовать проценты для вашей ширины и высоты.

1. Я действительно хочу сохранить поле такого размера, я должен был объяснить, извините, я хочу, чтобы в теле отображались полосы прокрутки, если диалоговое окно больше, чем оно. возможно ли это вообще?