我正在尝试制作一个可以最小化到屏幕右下角的简单Modal Box，以便我可以将其变成一个插件，但是我无法让简单的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>
任何建议都会有所帮助！谢谢！
最佳答案
在设置有冲突的位置说明符（右，下）之前，应确保将top：和left：设置为auto。否则，浏览器将根据情况选择一个。
关于jquery - jQuery .CSS不会将元素定位在右下 Angular !，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3161862/