easyui $.messager.progress 调整消息框的位置

最新推荐文章于 2021-08-06 08:33:45 发布

原创最新推荐文章于 2021-08-06 08:33:45 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

easyui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍使用EasyUI前端框架时如何调整消息框的位置。针对$.messager.show之外的消息框，如加载框，通过手动调整生成的div元素样式实现位置自定义。文中提供具体的JavaScript代码示例。

最近用esyui做前台框架，发现消息框只有 $.messager.show 有style属性可以调整位置，而其他消息框则要做js处理

生成加载框

$.messager.progress({
    title: '等待',
    msg: '处理中...'
});

系统会在body下生成这两块div

<div class="window-shadow" style="display: block; left: 527px; top: 200px; z-index: 9035; width: 300px; height: 129px; position: absolute;"></div>
<div class="window-mask" style="display: block; z-index: 9000; position: fixed;"></div>

js调整这两块div即可，其他消息框同理

//.messager-window和.window-shadow具体在那个块下面，根据实际情况调整
$("body").find(".messager-window").css({
  "display": "block",
  "width": "300px",
  "left": "527px",
  "top": "200px",
  "z-index": "9036",
  "position": "absolute"});
$("body").find(".window-shadow").css({
  "display": "block",
  "width": "300px",
  "left": "527px",
  "top": "200px",
  "z-index": "9035",
  "position": "absolute"});