0
我想做一个简单的模态框，可以最小化到屏幕的右下角，所以我可以把它变成一个插件，但我不能让简单的CSS工作，并将其本身定位在右下角！以下是所有代码，您可以立即将其粘贴并查看示例工作。jQuery .CSS不会将元素放置在右下角！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Minimize Window</title>
<script src="http://www.fzilla.com/f/jquery"></script>
<style>
* {margin:0px; padding:0px;}
body {font-family: SegoeUI, Helvetica, Arial, sans-serif; font-size:14px;}
.window {position:fixed; height:auto; width:450px; border:1px solid #ccc; overflow:hidden;}
.window.minimized {height:50px; bottom:100px; right:50px;}
.window .top_bar {border-bottom:1px solid #ccc; padding:3px 5px;}
.window .top_bar .title {font-size:1.4em; font-weight:600;}
.window .top_bar .controls {font-weight:600; float:right;}
.window .top_bar .controls a {cursor:pointer; color:#666;}
</style>
<script>
$(document).ready(function(){
var initial_height = $(".window").height();
var windows_on = false;
$(".minimize").click(function(){
var t = $(this);
var tx = t.html();
if (tx == "[-]") {
// code when minimizing and putting to bottom right
windows_on = false;
t.html("[+]");
t.parents(".window").css({ "height": "50px", "bottom": "100px", "right":"50px" });
t.parents(".window").addClass("minimized");
} else {
// code when making bigger and centering
windows_on = true;
t.html("[-]");
t.parents(".window").removeClass("minimized");
t.parents(".window").css({ "height": "400" });
center();
}
});
$(window).resize(function(){ if (windows_on) { center() } });
var w, h, aw, ah, y, x;
function center() {
var t = $(".window");
w = t.width();
h = t.height();
aw = $(window).width();
ah = $(window).height();
y = (ah - h)/2;
x = (aw - w)/2;
t.css({"top":y, "left":x});
}
});
</script>
</head>
<body>
<div class="window minimized">
<div class="top_bar">
<span class="title">This is the title of our window</span>
<span class="controls"><a class="minimize">[+]</a></span>
</div><!-- top_bar -->
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui tellus, feugiat id interdum id, tempor id felis. Nam id imperdiet nulla. Nunc auctor turpis id lectus mollis vel vehicula mauris porta. Nullam cursus mi at turpis viverra sed euismod metus elementum. Integer imperdiet, felis sit amet rhoncus eleifend, nisi orci convallis libero, in iaculis mauris sapien vel est.</p>
<p> Morbi urna mi, dapibus vitae tincidunt in, commodo vel enim. In porta laoreet elit id vehicula. Proin id augue mauris, vel commodo diam. Fusce a metus et est porta fringilla at congue enim. Nulla elit ligula, aliquam sit amet bibendum vitae, rutrum ac quam. Nunc diam erat, condimentum sed sagittis sed, posuere eu mi. Etiam sit amet nibh vel massa faucibus dictum et vel metus. Sed gravida commodo neque eu euismod. Fusce eget orci sed lacus hendrerit porttitor.</p>
</div><!-- content -->
</div><!-- window -->
</body>
</html>
任何建议将帮助！谢谢！
没有不是这种情况，我曾尝试设置一个高度，它没有改变任何东西。 – 2010-07-01 21:42:41
@天使：它可能没有解决它自己的问题，但它是你想要看作解决方案的*部分*的东西。除非你告诉它，'body' **不会**在一些（许多）浏览器上填充视口。 – 2010-07-01 21:44:48