当前位置： 文江博客话题详情

jQuery .CSS 不会将元素定位到右下角！

发布于 2024-09-07 21:06:03 字数 3360 浏览 7 评论 0原文

我正在尝试制作一个简单的模态框，可以最小化到屏幕的右下角，这样我就可以将其制作成一个插件，但我无法让简单的 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>

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

原文

I am trying to make a simple Modal Box that can be minimzed to the bottom right of the screen so i can make it into a plugin but i cant get the simple CSS to work and position itself to the bottom right! Here is all the code you can instantly paste it and see the example work.

<!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>

Any suggestions would help! Thanks!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

并安 2024-09-14 21:06:04

身体没有设置高度，因此可能不会填满整个屏幕。然后 .window 将在 body-container 大小的底部对齐
尝试设置 body 元素的高度。

Body has no heigth set and will therefore maybe not fill your whole screen. The .window will then be alligned at the botom of the body-container size
Try setting a heigth for the body element.

回复 原文
远山浅 2024-09-14 21:06:04

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

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

根本不需要 center 方法...

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

Here is a full working solution ..

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

You do not need the center method at all...

just set top/left for the .window to 50% and use negative margins to center it (based on size of window) ...

回复 原文
执手闯天涯 2024-09-14 21:06:04
  • 在最小化时，您设置高度、底部和右侧属性。
  • 在最大化时，您设置高度，然后设置中心（），即设置顶部和左侧属性。

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

因此，添加和删除 .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 文件中不再有硬编码值。

  • On minimizing you set height, bottom and right properties
  • On maximizing, you set height and then center() i.e. set top and left properties

These are inline styles thus with higher priority than properties set via a stylesheet.

Adding and removing .minimized thus has a lower priority.

Solutions:

1/ Set bottom and right to auto when maximizing (because minimizing set them) and top and left to auto when minimizing (because center() set them when maximizing)
.

$(".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/ better: don't use .css() but just .addClass() on .toggle() If your CSS are OK, it'll have the same effect. Bonus: no more hardcoded values in your JS file.

回复 原文
给我一枪 2024-09-14 21:06:04

所以我尝试仅使用 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>

So i tried the Toggle with using just CSS to do it, and it works great... BUT as soon as i added the center script it breaks the minimize option because it keeps working even though my if statement has been set to false... here is the new code (much slicker):

<!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>
回复 原文
少年亿悲伤 2024-09-14 21:06:03

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

You should be sure to set top: and left: to auto before setting conflicting positioning specifiers (right, bottom). Otherwise the browser will choose one over the other, depending on the situation.

回复 原文
~没有更多了~

关于作者

无畏

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

梦年海沫深

文章 0 评论 0

liaowenxiong

文章 0 评论 0

丢了幸福的猪

文章 0 评论 0

kaipeng

文章 0 评论 0

微信用户

文章 0 评论 0

独享拥抱

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文