淘宝widget—popup组件的用法【sdk2.0】

新版的SDK中Popup组件的写法基本上还是与原来保持一致，不过还需要两个方面：

第1方面：DOM结构中的变换【在data-widget-config中需要添加一个'triggerType':'mouse'配置】

<div class="tb-module tshop-um tshop-um-testting">
    <div class="wrap">
        <ul class="triggers">
            <li class="one">One</li>
            <li class="one">Two</li>
            <li class="one">Three</li>
            <li class="one">Four</li>
            <li class="one">Five</li>
        </ul>
        
        <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.one','triggerType':'mouse','align':{'node':'.one','offset':[0,0],'points':['tr','tl']}}">
            <div class="my-pop">
                Hello,我是第1名
            </div>
        </div>
    </div>
</div>

 

第二方面：对于CSS方面的变换【系统不再默认添加hidden样式类，所以这个类我们要自己编写】

.tshop-um-testting .hidden {
    visibility:hidden;  //此处不能用display:none
    position:absolute; //这一句必须加上去，否则弹出层会占位
}