怎么让页面弹出的dialog不影响底层页面布局

Question

做了个页面，添加和修改，查找都是juqery的dialog弹出，可是dialog淡出的时候，却把主页面的按钮的位置挤到一边去了，有大神能解答下么？非常感谢

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这个问题是由于jQuery Dialog在淡出时使用了position:fixed导致的。你可以尝试以下方法来解决：

1. 使用CSS定位：可以使用相对定位（relative）或绝对定位（absolute），但是绝对定位会导致元素失去原有的布局。

2. 设置透明度：可以通过设置元素的透明度，使其淡出效果更柔和。

3. 设置z-index：将dialog放在body上，或者通过z-index属性调整对话框的显示顺序。

4. 修改默认样式：如果你已经确定了这个对话框的样式不会影响到其他元素，那么你可以在其外部添加一个div，将其包裹起来，并在外部修改对话框的样式。

以下是具体的实现步骤：

首先，你需要创建一个新的div元素作为容器，然后在这个容器中放置你的dialog元素：

<div id="dialog-container">
  <div id="dialog" style="display:none;"></div>
</div>

接下来，在JavaScript中绑定事件处理程序以打开和关闭对话框：

$(document).ready(function(){
  $('#dialog').dialog({
    autoOpen:false,
    width:'auto',
    height:'auto',
    position:'center',
    modal:true,
    closeText:'关闭',
    open:function(event,ui){
      ui.dialog.css('opacity',0.8);
      ui.dialog.css('filter','alpha(opacity=80)');
    },
    close:function(event,ui){
      ui.dialog.css('opacity',1);
      ui.dialog.css('filter','none');
    }
  });
});

最后，你可以为这个对话框添加一些样式，例如：

#dialog {
  background-color:#fff;
  border-radius:6px;
  box-shadow:0 0 6px rgba(0,0,0,.1);
}

这样，当用户点击对话框的关闭按钮时，它会正确地关闭并移除从对话框容器中分离出来。