背景：之前一直用的artdialog，但是样式不是很好看，后来偶然看到layer,觉得不错，但是对于.net mvc来说，不能像artdialog一样弹出分部视图是很难受的。所以下面的方法就解决了。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title></title>

    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="jquery-1.10.2.js"></script>

    <script src="layer/layer.js"></script>

    <script>

        layer.loading = function (url, opt) {

            var cid = layer.load(0, { shade: false }); //0代表加载的风格，支持0-2

            $.ajax({

                url: url,

                success: function (content) {

                        layer.close(cid);

                        opt.content = content;

                        layer.open(opt);

                }

            });

        }

        layer.alertP = function (content, options, yes) {

            var type = typeof options === 'function';

            if (type) yes = options;

            return layer.open($.extend({

                content: content,

                skin: 'layui-phone-alert',

                title: '',

                closeBtn: 0,

                yes: yes

            }, type ? {} : options));

        }

        layer.confirmP = function (content, options, yes, cancel) {

            var type = typeof options === 'function';

            if (type) {

                cancel = yes;

                yes = options;

            }

            return layer.confirm(content, $.extend({

                content: content,

                skin: 'layui-phone-confirm',

                title: '',

                closeBtn: 0,

                yes: yes,

                btn2: cancel

            }, type ? {} : options));

        }

    </script>

    <script>

        //d1跟d6类似，只不过多了个type,但是d6Alert时不会关闭当前弹出层，d1会，所以我一般用d6(记得加padding，因为d6默认没有padding)，以P结尾的表示对手机端弹出的封装

        function d1() {

            layer.loading("part.html", {

                title: '异步加载！',

                maxWidth: 600,

                type: 1,

                success: function () {

                    alert(1);

                },

                btn: ['确定', '取消'],

                btn1: function (index, layero) {

                    //按钮【按钮一】的回调

                    layer.alert("弹窗内容，告知当前状态、")

                },

                btn2: function (index, layero) {

                    //按钮【按钮二】的回调

                    //return false 开启该代码可禁止点击该按钮关闭

                }

            });

        }

        function d6() {

            layer.loading("part.html", {

                title: '异步加载！',

                maxWidth: 600,

                btn: ['确定', '取消'],

                btn1: function (index, layero) {

                    //按钮【按钮一】的回调

                    layer.alert("弹窗内容，告知当前状态、")

                },

                btn2: function (index, layero) {

                    //按钮【按钮二】的回调

                    //return false 开启该代码可禁止点击该按钮关闭

                }

            });

        }

        function d4() {

            layer.confirm('确定要删除吗？', { icon: 3 }, function () {

                layer.msg('删除成功', { time: 200000 });

            });

        }

        function d2() {

            layer.alert("弹窗内容，告知当前状态、")

        }

        function d3() {

            layer.alertP("layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案。");

        }

        function d5() {

            layer.confirmP('确定要删除吗？', function () {

                layer.msg('删除成功', { icon: 1 });

            });

        }

    </script>

</head>

<body>

    <button type="button" onclick="d2()">普通对话框</button>

    <button type="button" onclick="d4()">提示是否</button>

    <button type="button" onclick="d3()">手机对话框</button>

    <button type="button" onclick="d5()">手机对话框是否</button>

    <button type="button" onclick="d1()">异步提示框1</button>

    <button type="button" onclick="d6()">异步提示框2</button>

</body>

</html>

基于layer封装的异步加载分部视图弹出层的更多相关文章

  1. bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...

  2. MVC学习系列6--使用Ajax加载分部视图和Json格式的数据

    Ajax的应用在平时的工作中,很是常见,这篇文章,完全是为了,巩固复习. 我们先看看不使用json格式返回分部视图: 先说需求吧: 我有两个实体,一个是出版商[Publisher],一个是书[Book ...

  3. ajax二次封装之异步加载

    ajax二次封装之异步加载 ajax异步加载会导致在数据未加载回来就读取数据,然后出现数据为空的报错.在ajax封装时,将ajax直接改为同步,虽然可以解决报错,但是会导致页面渲染被阻塞,接口反应时间 ...

  4. MVC5中，加载分部视图，常见的方式

    首先,新建一个MVC类型的Web项目: 然后在Model文件夹下定义一个Student实体: public class Student { public int ID { get; set; } pu ...

  5. MVC学习七：Razor布局之加载分部视图【PartialView】

    Partial View 顾名思义就是Html代码片段,应用于此HTML代码多次被页面加载时使用.(类似于WebForm程序中的用户控件) 注:PartialView和正常的View页面在访问时没有任 ...

  6. JavaScript：用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

  7. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  8. wemall app商城源码中基于JAVA的Android异步加载图片管理器代码

    wemall doraemon是Android客户端程序,服务端采用wemall微信商城,不对原商城做任何修改,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可随意定制修改.本文分享其中 ...

  9. 基于jQuery的图片异步加载和预加载实例

    如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...

随机推荐

  1. win+R下的命令

    1.inetmgr 打开IIS 2.taskmgr 打开任务管理器 3.calc 打开计算器 4.msconfig 系统启动配置 5.mstsc  远程桌面 6.systeminfo 查看电脑信息 7 ...

  2. 安装VS2013时，如何避开IE10的限制

    安装VS2013时,如何避开IE10的限制 VS就会告诉我们目前环境不适合安装VS2013,必须升级IE版本到IE10. 如果不想安装IE10,有没有办法呢? 答案肯定是有的. 将下面一段文字,储存为 ...

  3. oracle学习篇十：序列

    序列:是用来生成唯一.连续的整数的数据库对象.序列通常用来自动生成主键或唯一键的值. 1. 创建序列语法如下: Create SEQUENCE sequence_name [START WITH in ...

  4. Dubbo与Zookeeper、Spring整合使用 maven+springmvc+dubbo+zookeeper

    为什么要用dubbo?   还是让官方来解释吧: http://dubbo.io/User+Guide-zh.htm   http://dubbo.io/   一般 nginx+tomcat  | - ...

  5. 10th week task -3 Arrow function restore

    Arrow function restore 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { r ...

  6. ECharts动态数据加载

    最近有用到ECharts做可视化报表,小结一下 一.准备数据 1.官网下载echarts.min.js 2.引入jquery.js 3.请求用的json数据 { "list":[ ...

  7. H5新特性监听手机的返回键

    var hiddenProperty ='hidden' in document ? 'hidden' :'webkitHidden' in document ? 'webkitHidden' : ' ...

  8. 如何才能快速入门python3？

    一些朋友自学python过程中,发现书也能看懂,书上的玩具代码也能看懂,但为啥自己不能做习题,不能写代码解决问题,自己不能动手写代码? 原因是初学者没有学会计算思维.解决问题的方法.编程思路. 编程思 ...

  9. 今日头条极速版邀请码以及其它APP邀请码大全

    现在大多手机新闻APP都需要输入码,在网上找了很久,最终找到一个比较全的文章,本人试过,都是可以使用的! 第1个比较好,可边看新闻,边收益!嘻嘻!平时写代码累了,休息刷一下!或者在睡觉前刷新一下,每天 ...

  10. Android自定义之ScrollView下拉刷新

    公司项目,需要用到ScrollView的下拉刷新,一开始使用的时候PullToRefresh三方库的下拉刷新,我比较纠结第三档库,很强大,但是,公司项目的需求,PullToRefresh就不能做到了, ...