H5上面套用SUI发现的一个问题-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：8-1 z-index相关实践分享

Samuel_Yang

2017-05-04 16:57

我直接用了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);

}

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

写回答关注

5回答

慕沐925745

2019-05-17 18:01:03

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

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

仰望_123

2018-06-03 15:52:08

是“z-index值太高了”。

0 0
仰望_123

2018-06-03 15:46:59

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

0 0
kelleyq7

2017-06-26 14:34:39

z-index值太高了

0 0