jQuery 警报框固定位置问题？答案

【问题标题】：jQuery Alert Box Fixed Location Issue?jQuery 警报框固定位置问题？
【发布时间】：2017-09-01 14:28:40
【问题描述】：

我在将jQuery 警报框定位到页面中心以外的任何位置时遇到了一个小问题。一旦我的按钮功能启动并打开它的设置到页面的 center。

我正在尝试使用div 上的一个类来给它一个固定的位置来尝试改变它，但仍然没有快乐有人知道我可能在哪里出错了吗？

谢谢。

function myFunction() {
  $("#dialog1").dialog("open");
}

$(function() {
  $("#dialog1").dialog({
    autoOpen: false,
    show: {
      effect: "puff",
      duration: 300
    },
    hide: {
      effect: "clip",
      duration: 500
    }
  });

  $("#opener").on("click", function() {
    $("#dialog1").dialog("open");
  });

});

.alertBox {
  position: fixed;
  bottom: 0;
  right: 0;
}

<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<div id="dialog1" class="alertBox" title="Alert Title!">
  <p>Alert Message Example</p>
</div>

<body>
  <button onclick="myFunction()">OPEN ALERT</button>
</body>

</html>

【问题讨论】：

Position jQuery dialog box的可能重复
也许你知道这一点，但#dialog1 div 在body 标签之外。

标签： jquery html css

【解决方案1】：

jQuery Dialog 有一个内置的position option，您可以使用它：

指定对话框打开时应显示的位置。该对话框将处理冲突，以便尽可能多地显示对话框。

$("#dialog1").dialog({
    position: {my: 'right bottom', at: 'right bottom'}
});

在您的代码中实现，如下所示：

function myFunction() {
  $("#dialog1").dialog("open");
}

$(function() {
  $("#dialog1").dialog({
    autoOpen: false,
    show: {
      effect: "puff",
      duration: 300
    },
    hide: {
      effect: "clip",
      duration: 500
    },
    position: {my: 'right bottom', at: 'right bottom'}

  });

  $("#opener").on("click", function() {
    $("#dialog1").dialog("open");
  });

});

.alertBox {
  position: fixed;
  bottom: 0;
  right: 0;
}

<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<div id="dialog1" class="alertBox" title="Alert Title!">
  <p>Alert Message Example</p>
</div>

<body>
  <button onclick="myFunction()">OPEN ALERT</button>
</body>

</html>

【讨论】：

【解决方案2】：

对话框有一个位置属性。您可以设置诸如“left”、“center”、“right”之类的短语，甚至可以将其与pixel/percentage 值结合使用。

my 定义元素位置本身，at 定义对齐到目标元素的位置。

看看这个小提琴：

function myFunction() {
  $("#dialog1").dialog("open");
}

$(function() {
  $("#dialog1").dialog({
    autoOpen: false,
    position: {my: 'center+20px', at: 'bottom'},
    show: {
      effect: "puff",
      duration: 300
    },
    hide: {
      effect: "clip",
      duration: 500
    }
  });

  $("#opener").on("click", function() {
    $("#dialog1").dialog("open");
  });

});

.alertBox {
  position: fixed;
  bottom: 0;
  right: 0;
}

<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<div id="dialog1" class="alertBox" title="Alert Title!">
  <p>Alert Message Example</p>
</div>

<body>
  <button onclick="myFunction()">OPEN ALERT</button>
</body>

</html>

【讨论】：