Question

我正在尝试创建一个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>

Answer 1

这种情况正在发生，因为您正在使用position: fixed，我非常确定无视页面边框。为什么不将元素的宽度与页面的宽度进行比较，并决定从那里采取什么行动？

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

Answer 2

尽管您在初始化时进行了设置，但在调整大小时，永远不会调整覆盖框的宽度和高度。因此，您的CSS假定您希望保持盒子的大小。尝试使用宽度和高度的百分比。

创建模态对话框 - 内容消失

2 个答案: