使用 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. 代码审计-phpcms9.6.2任意文件下载漏洞

    漏洞文件: phpcms\modules\content\down.php 1.在download函数中对文件的校验部分 首先 if(preg_match('/(php|phtml|php3|php4 ...

  2. CTF-SSH私钥泄露渗透

    环境 Kali ip 192.168.56.102 Smb 靶机ip 192.168.56.104 0x01信息探测 使用netdiscover -r ip/mask 进行内网网段存活ip探测 靶机为 ...

  3. ThinkPHP5 远程命令执行漏洞分析

    本文首发自安全脉搏,转载请注明出处. 前言 ThinkPHP官方最近修复了一个严重的远程代码执行漏洞.这个主要漏洞原因是由于框架对控制器名没有进行足够的校验导致在没有开启强制路由的情况下可以构造恶意语 ...

  4. 维护基于ASP.NET的网站的学习-SqlCommand类介绍及存储过程

    笔者目前在维护学校科技处的一个网站,目前学期初,教师申报项目操作多,出现了一些问题.前几天维护了一个验证码图片不显示的bug,今天想记录下这个解决了一整天的bug-老师项目结题需要手动修改数据库老师项 ...

  5. gitlab 提交

    gitlab 提交 Git global setup git config --global user.name "lial" git config --global user.e ...

  6. C#窗体练习:带历史信息的菜单

    在开发图纸管理软件时,要求在菜单上记录用户最近打开的档案或图纸,以方便下次使用.单击“文件”菜单下的“打开文件”子菜单,打开需要查阅的图纸.下次运行该软件时,上次打开的文件名记录到“文件”菜单的历史菜 ...

  7. C# 求Π Π/4=1-1/3+1/5-1/7+......+1/(2*n-3)-1/(2*n-1); (n=2000)

    double a = 0.0;//最终Π的结果 double类型 int n; for (n = 1; n <= 2000; n++) { if (n % 2 == 1) { a += 1.0 ...

  8. 小程序预览pdf文件

    有个业务需求,需要在小程序查看客户已开的发票 发票地址: https://www.chinaeinv.com/p.jspa?cxxxxxxxxxxxx 刚开始是想利用webview当作外链进行跳转访问 ...

  9. 使用face-api.js实现人脸识别(一)

    功能 第一阶段实现对图片中人脸的识别并打上标签(比如:人名) 第二阶段使用摄像头实现对人物的识别,比如典型的应用做一个人脸考勤的系统 资源 face-api.js https://github.com ...

  10. [正确配置]win7 PL/SQL 连接Oralce 11g 64位

    PL/SQL 版本号:15.0.5.1710 32位 win7 64位系统 instantclient 12.1 32位,PL/SQL不支持64位 关键问题 1.Not logged on 2.没有c ...