mui弹出菜单提示对话框居中

预览图

90XXO~ON8PMPXWS{NWFQHTB.png

html

    <div id="popover" class="mui-popover">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell title"><a>解绑微信</a></li>
        <li class="mui-table-view-cell marked"><a>确定解除与微信号的绑定吗？</a></li>
        <li class="mui-table-view-cell twice">
          <div class="no">暂不解除</div> <div class="line">&nbsp;</div>  <div class="sure">解除绑定</div>
        </li>
      </ul>
    </div>

js

mui('.mui-popover').popover('toggle',
              document.getElementById("openPopover"));

css

#popover{
  color: #FFFFFF;
  width: 526/@font-size-base;
  height: 334/@font-size-base;
  border-radius:32/@font-size-base;
  //固定定位 设置弹出菜单位置
  position: fixed;
  top: 38%;
  left: 15%;
  .mui-table-view{
    border-radius:32/@font-size-base;
    height: 334/@font-size-base;
    .title{
      color: #030303;
      text-align: center;
      width: 100%;
      font-size: 32/@font-size-base;
      margin-top: 20/@font-size-base;
    }
    .marked{
      color: #666666;
      text-align: center;
      width: 100%;
      font-size: 28/@font-size-base;
      margin-top: -4/@font-size-base;
    }
    .twice{
      width: 100%;
      font-size: 32/@font-size-base;
      color: #4A90E2;
      border-top:2/@font-size-base solid #EEEEEE;
      margin-top: 32/@font-size-base;
      padding: 0 0;
      height: 112/@font-size-base;
      .no{
        text-align: center;
        display: inline-block;
        margin-left: 70/@font-size-base;
        margin-top: 30/@font-size-base;
        //把元素的顶端与行中最高元素的顶端对齐
        //用于解决行内块元素设置一个margin-top其他元素跟着动
        vertical-align: top;
      }
      .line{
        display: inline-block;
        height: 100%;
        width: 50/@font-size-base;
        border-right:2/@font-size-base solid #EEEEEE;
      }
      .sure{
        text-align: center;
        display: inline-block;
        margin-left: 50/@font-size-base;
        margin-top: 30/@font-size-base;
        vertical-align: top;
      }
    }
  }
}