问答详情
源自：8-1 z-index相关实践分享

H5上面套用SUI发现的一个问题

我直接用了SUI的popup

http://m.sui.taobao.org/components/#popup

然后遇到了一个问题

我打开的popup会有一个蒙层 蒙层我想要但是他覆盖了我的popup连popup上面的按钮都按不了。

这是蒙层

.popup-overlay.modal-overlay-visible {

   visibility: visible;

   opacity: 1;

}

sm.css:2716

.popup-overlay {

   z-index: 10200;

}

sm.css:2697

.modal-overlay, .preloader-indicator-overlay, .popup-overlay {

   position: absolute;

   left: 0;

   top: 0;

   width: 100%;

   height: 100%;

   background: rgba(0, 0, 0, 0.4);

   z-index: 10600;

   visibility: hidden;

   opacity: 0;

   -webkit-transition-duration: 400ms;

   transition-duration: 400ms;

}

他好像是JS生成的

这是POPUP

.popup, .login-screen {

   position: absolute;

   left: 0;

   top: 0;

   width: 100%;

   height: 100%;

   z-index: 10400;

   background: #fff;

   box-sizing: border-box;

   display: none;

   overflow: auto;

   -webkit-overflow-scrolling: touch;

   -webkit-transition-property: -webkit-transform;

   transition-property: transform;

   -webkit-transform: translate3d(0, 100%, 0);

   transform: translate3d(0, 100%, 0);

}

弄了好久还是搞不懂为啥 这是这样的上次遇到过，然后也没有处理，只是换了一种方式，但是现在要求半屏上次的不行了 只能用蒙层了http://img.mukewang.com/590aed050001599b03540585.jpg

提问者：Samuel_Yang 2017-05-04 16:57

个回答

  • 慕沐925745
    2019-05-17 18:01:03

    在动态模板上使用popup组件，仅仅加class和dom是不行的，也需要用动态模板的方式创建popup，参看官方文档

    动态的 Popup


    0
  • 慕沐925745
    2019-05-17 17:58:12

    $(document).on('click','.create-popup', function () {   var popupHTML = '<div class="popup">'+                     '<div class="content-block">'+                       '<p>Popup created dynamically.</p>'+                       '<p><a href="#" class="close-popup">Close me</a></p>'+                     '</div>'+                   '</div>'   $.popup(popupHTML); });


    0
  • 仰望_123
    2018-06-03 15:52:08

    是“z-index值太高了”。

    0
  • 仰望_123
    2018-06-03 15:46:59

    "打开的popup会有一个蒙层 蒙层我想要但是他覆盖了我的popup连popup上面的按钮都按不了",如何解决？

    0
  • kelleyq7
    2017-06-26 14:34:39

    z-index值太高了

    0