使用 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>
使用 MUI 自制 弹出层的更多相关文章
- js 带遮罩层的弹出层
最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- 弹出层layer的使用
弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...
- zepto弹出层组件
html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...
- 关于淘宝店铺装修弹出层popup的记录
小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...
- Fancybox丰富的弹出层效果
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...
- zDiaLog弹出层
zDiaLog弹出层 立即下载 插件描述:zDiaLog弹出层 弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻 ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
随机推荐
- Ubuntu16.04 安装apache+mysql+php(LAMP)
记录下ubuntu环境下安装apache+mysql+php(LAMP)环境. 0x01安装apache sudo apt-get update sudo apt-get install apache ...
- jquery的返回顶端的功能实现
页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用. 具体功能是,jquey控制,向下滚动出现返回顶部图片,若滚动返回顶部或点回顶部,则图标消失. 实现效果如下图:
- go-关键字-变量
var 声明变量 const 常量的关键字, 常量不能出现只声明不赋值的情况. 名字首字母为大写的程序实体可以被任何代码包中的代码访问到. 名字首字母为小写的程序实体则只能被同一个代码包中的代 ...
- 2.单核CPU是如何实现多进程的?
单核cpu之所以能够实现多进程,主要是依靠于操作系统的进程的调度算法 如时间片轮转算法,在早期,举例说明:有5个正在运行的程序(即5个进程) : QQ 微信 有道词典 网易云 ...
- ESP8266开发之旅 网络篇⑩ UDP服务
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...
- PAT-1022 Digital Library (30 分) 字符串处理
A Digital Library contains millions of books, stored according to their titles, authors, key words o ...
- 使用FastReport报表工具生成标签打印文档
在我们实际开发报表的时候,我们需要按一定的业务规则组织好报表的模板设计,让报表尽可能的贴近实际的需求,在之前的随笔中<使用FastReport报表工具生成报表PDF文档>介绍了FastRe ...
- CCBPM工作流系统中如何在特定的一个步骤,调用起另外一条流程
关键词: 工作流快速开发平台 工作流设计 业务流程管理 asp.net 开源工作流bpm工作流系统 java工作流主流框架 自定义工作流引擎 需求描述: 1, 操作员在操作最后一个节点时, ...
- docker安装sshd
基础镜像: ubuntu:14.04 启动并安装sshd //启动 docker run -it ubuntu:14.04 /bin/bash //更新apt-get apt-get update / ...
- markdown 入门教程(完整版)
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 1. 标题 Markdown支持6种级别的标题,对应html标签 h1 ~ h6 ...