Question

我遇到一个小问题，我的jQuery提醒框位于页面中心以外的任何位置。一旦我的按钮功能启动，它就会将其设置打开到页面的中心。

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

感谢。

＆＃13;

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");
  });

});

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

Dialog有一个位置属性。您可以设置短语，例如＆＃34; left＆＃34;，＆＃34; center＆＃34;，＆＃34; right＆＃34;甚至将它与pixel/percentage值组合在一起。

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

看看这个小提琴：

＆＃13;

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");
  });

});

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery Alert Box固定位置问题？

2 个答案: