你的微笑
你的微笑
  • 发布:2017-07-26 16:31
  • 更新:2021-04-16 15:33
  • 阅读:2887

mui中美丽的popover

分类:MUI
mui

新手 在mui中找不到我想要的弹框类型的模拟窗口,自己改了一下
<div id="chosesku" style="background: #FFFFFF;" class="chosesku box mui-popover mui-popover-action mui-popover-bottom">
<div class="choseskuimg">
<img style=" border-radius: 5px; width: 70px ;height: 90px;" src="../images/shuijiao.jpg" />
</div>
<div style="margin-top: 25px; margin-left: 90px;">
<h4 style="color: red;">¥9999</h4>
<h5>商品号:44050505</h5>
</div>
<div class="solid"></div>
<!--sku选项 -->
<div>
<h5 style="margin-left: 5px;margin-top: 10px;">颜色</h5>
<input class="sku" type="button" value="白色" />
<input class="sku" type="button" value="红色" />
<input class="sku" type="button" value="黑色" />
<input class="sku" type="button" value="灰色" />
<input class="sku" type="button" value="灰白色" />
</div>
<div>
<h5 style="margin-left: 5px;margin-top: 10px;">体重</h5>
<input class="sku" type="button" value="1kg" />
<input class="sku" type="button" value="1.5kg" />
<input class="sku" type="button" value="1.8kg" />

        </div>  
        <div class="solid"></div>  
        <div style="margin-top: 10px;">  
            <h5 style="margin-left: 5px;margin-top: 10px;display: block;float: left;">数量</h5>  
            <div class="mui-numbox " style="width: 130px;height: 33px;float: right;" data-numbox-min='1' data-numbox-max='99'>  
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>  
                <input id="id_item_count" class="mui-input-numbox" type="number" />  
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>  
            </div>  
        </div>  
        <div class="footer">  
            <button type="button" class="mui-btn mui-btn-warning mui-btn-block">加入购物车</button>  
        </div>  
    </div>  

点击弹出
<a href="#chosesku">
<div style="margin-top: 10px; border-top: solid 0.5px #E8E8E8;border-bottom: solid 0.5px #E8E8E8;height: 55px;">
<p style="float:left">已选:</p>
<h5 style="">白喵,灰白,官方标配!白喵,</h5>
<div style="float: right;margin-top: -20px;font-size: 30px;margin-right: 10px;">…</div>
</div>
</a>

1 关注 分享
DCloud_heavensoft

要回复文章请先登录注册

你的微笑

你的微笑 (作者)

回复 stock2 :
是的
2021-04-16 15:33
你的微笑

你的微笑 (作者)

回复 vreyqqq :
可以用啊
2017-11-17 11:25
vreyqqq

vreyqqq

并不能用。。
2017-11-16 15:16
你的微笑

你的微笑 (作者)

回复 stock2 :
对的
2017-08-22 10:11
stock2

stock2

不错 .赞
2017-07-29 15:49
你的微笑

你的微笑 (作者)

回复 stock2 :
是啊
2017-07-27 09:30
stock2

stock2

是不是类似点击筛选,弹出的选择层?
2017-07-26 22:25