Question

我正在尝试制作一个简单的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>

任何建议都会有所帮助！谢谢！

Answer 1

在设置冲突的定位说明符（右，下）之前，您应该确保将top：和left：设置为auto。否则，浏览器将根据具体情况选择其中一个。

Answer 2

身体没有设置高度，因此可能无法填满整个屏幕。然后.window将在身体容器尺寸的底部对齐尝试为body元素设置一个高度。

Answer 3

这是一个完整的解决方案..

http://www.jsfiddle.net/wvgVv/

根本不需要中心方法......

只需为top设置left / .window为50％，并使用负边距将其居中（基于窗口的大小）...

Answer 4

最小化您设置高度，底部和右侧属性
在最大化时，设置高度，然后设置中心（），即设置顶部和左侧属性

这些是内联样式，因此优先级高于通过样式表设置的属性。

因此，添加和删除.minimized的优先级较低。

解决方案：

1 /最大化时将底部和右侧设置为自动（因为最小化设置），最小化时将顶部和左侧设置为自动（因为center（）在最大化时设置它们）

$(".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", "left": "auto", "top": "auto", "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": "400px" , "bottom": "auto", "right":"auto" });

   center();
  }
 });

2 /更好：不要使用.css（）而只是.toggle（）上的.addClass（）如果您的CSS没问题，它将具有相同的效果。额外奖励：JS文件中不再有硬编码值。

Answer 5

所以我尝试使用Toggle只使用CSS来实现它，并且它工作得很好......但是只要我添加了中心脚本就会打破最小化选项，因为即使我的if语句设置为false ...这是新代码（更加流畅）：

<!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; height:1000px;}
.window {position:fixed; height:auto; width:450px; bottom:auto; right:auto; left:auto; top:auto; border:1px solid #ccc; overflow:hidden;}
.window.min {height:31px; bottom:50px; left:auto; top:auto; right:25px;}
.window.max {height:auto; bottom:auto; left:40%; top:30%; right:auto;}

.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;}
.window .content {padding:5px;}
.window .content p {margin-bottom:1.2em;}
</style>
<script>
$(document).ready(function(){
    var windows_on = false;
    $(".minimize").toggle(function(){
        $(this).html("[-]");
        $(this).parents(".window").removeClass("min").addClass("max");
        windows_on = true;
        center();
    }, 
    function() {
        $(this).html("[+]");
        $(this).parents(".window").removeClass("max").addClass("min");
        windows_on = false;
    });

    // code for positioning 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 min">
    <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>

jQuery .CSS不会将元素放在右下角！

5 个答案: