使用 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>
 

使用 MUI 自制 弹出层的更多相关文章

  1. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  2. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  5. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

  6. 关于淘宝店铺装修弹出层popup的记录

    小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...

  7. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  8. zDiaLog弹出层

    zDiaLog弹出层  立即下载 插件描述:zDiaLog弹出层 弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻 ...

  9. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

随机推荐

  1. Ubuntu16.04 安装apache+mysql+php(LAMP)

    记录下ubuntu环境下安装apache+mysql+php(LAMP)环境. 0x01安装apache sudo apt-get update sudo apt-get install apache ...

  2. jquery的返回顶端的功能实现

    页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用. 具体功能是,jquey控制,向下滚动出现返回顶部图片,若滚动返回顶部或点回顶部,则图标消失. 实现效果如下图:

  3. go-关键字-变量

        var 声明变量 const 常量的关键字, 常量不能出现只声明不赋值的情况. 名字首字母为大写的程序实体可以被任何代码包中的代码访问到. 名字首字母为小写的程序实体则只能被同一个代码包中的代 ...

  4. 2.单核CPU是如何实现多进程的?

    单核cpu之所以能够实现多进程,主要是依靠于操作系统的进程的调度算法 如时间片轮转算法,在早期,举例说明:有5个正在运行的程序(即5个进程) :   QQ    微信    有道词典      网易云 ...

  5. ESP8266开发之旅 网络篇⑩ UDP服务

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  6. PAT-1022 Digital Library (30 分) 字符串处理

    A Digital Library contains millions of books, stored according to their titles, authors, key words o ...

  7. 使用FastReport报表工具生成标签打印文档

    在我们实际开发报表的时候,我们需要按一定的业务规则组织好报表的模板设计,让报表尽可能的贴近实际的需求,在之前的随笔中<使用FastReport报表工具生成报表PDF文档>介绍了FastRe ...

  8. CCBPM工作流系统中如何在特定的一个步骤,调用起另外一条流程

    关键词: 工作流快速开发平台  工作流设计  业务流程管理   asp.net 开源工作流bpm工作流系统  java工作流主流框架  自定义工作流引擎 需求描述: 1, 操作员在操作最后一个节点时, ...

  9. docker安装sshd

    基础镜像: ubuntu:14.04 启动并安装sshd //启动 docker run -it ubuntu:14.04 /bin/bash //更新apt-get apt-get update / ...

  10. markdown 入门教程(完整版)

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 1. 标题 Markdown支持6种级别的标题,对应html标签 h1 ~ h6 ...