使用 MUI 自制 弹出层

使用 MUI 自制 弹出层

<div class="zp-mask" style="display: none; width: 100%;height: 100%;background-color: rgba(0,0,0,0.45);
        position: fixed;top: 0px;left: 0px;bottom: 0px;right: 0px;">
            <div style="margin: 30% 10%;padding: 10px;background-color: #fff;border-radius: 8px;">
                <b style="margin-left: 15px">店铺管理</b>
                <hr style="margin-left: 15px">
                <form class="mui-input-group" action="{php echo $this->createMobileUrl('business', array('op' => 'register'));}" method="post">
                    <div class="mui-input-row">
                        <label for="shopname">店名</label>
                        <input class="mui-input-clear" type="text" id="shopname" name="shopname" required="required">
                    </div>
                    <div class="mui-input-row">
                        <label for="address">地址</label>
                        <input type="text" class="mui-input-clear" id="address">
                    </div>
                    <br>
                    <div class="mui-input-row">
                        <div class="mui-row">
                            <div class="col-sm-12">
                                <button type="submit" class="mui-btn mui-btn-success mui-btn-outlined" style="width: 100%">提交</button>
                            </div>
                        </div>
                    </div>
                </form>
                <br>
                <div class="col-sm-12">
                    <button type="button" class="mui-btn cancel-mask" style="width: 100%">取消</button>
                </div>
            </div>
        </div>
        <script>
            function addShop() {
                $('.zp-mask').css('display', 'block');
            }

            $('.cancel-mask').click(function () {
                $('.zp-mask').css('display', 'none');
            });
        </script>