创建模式对话框 - 内容消失
我正在尝试制作一个 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>
I am trying to make a jquery modal dialog. (please do not say "use a plugin").
I am well aware that the js I am using is crap,
once I am trying to hack together the basic functionality, once I have the basic functionality down I will rewrite this as a jquery plugin for my own use.
Anyway,
I have got the dialog appearing, and it is in the center of the page,
The dialog is sized by its content.
In this specific example the content has a fixed width.
I am trying to handle the case where the content is bigger that the page width.
I am getting a strange issue where, if the page is resized the content seems to literally just be cut off, no scroll bars.
What could be my issue?
Example: 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
发生这种情况是因为您使用的是
position:fixed，我很确定它会忽略页面边框。为什么不将元素的宽度与页面的宽度进行比较，然后决定采取什么行动呢？That's happening because you are using
position: fixed, which I am pretty sure disregards page borders. Why don't you compare the element's width with that of the page, and decide what course of action to take from there?尽管您在初始化时设置了覆盖框的宽度和高度，但在调整大小时您永远不会调整它。因此，您的 CSS 假设您希望保持盒子的大小。尝试使用百分比来表示宽度和高度。
You never adjust the width and the height of the overlay box when you resize, although you set it when you initialize. Hence, your CSS assumes you want to keep your box that size. Try using percentages for your width and height.