背景：之前一直用的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. IntelliJ IDEA 2017.2 下载和破解方法

    一.IntelliJ IDEA 2017 下载地址  http://www.jetbrains.com/idea/#chooseYourEdition 要下载付费版的,免费版的很多功能不能用 二.破解 ...

  2. Csharp:asp.net CheckBoxList databind

    /// <summary> /// CheckBoxList數據源 /// 塗聚文 /// 20130705 /// /// </summary> private void s ...

  3. scss-@each指令

    一.@each指令实例 在@each变量的定义,其中包含的每个项目的列表中的值. 语法: @each $var in <list or map> 语法简要说明如下. $var: 它代表了变 ...

  4. 给HTML拍个照（如何将html元素转成图片）

    本文主要介绍一款好用的库,如何将HTML生成图片. 1.简述 最近在做的项目中,需要将界面转换成模板保存下来,本来想使用自适应布局完成,但是页面较复杂,模板较多,生成的模板使用过多的HTML标签,于是 ...

  5. css随堂笔记（三）

    Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 ...

  6. Stage3--Python控制流程及函数

    说在前面: Stage1-Stage4简单介绍一下Python语法,Stage5开始用python实现一些实际应用,语法的东西到处可以查看到,学习一门程序语言的最终目的是应用,而不是学习语法,语法本事 ...

  7. matlab练习程序（全景图到穹顶图）

    这个程序我最初是用FreeImage写的,这两天改成了matlab,再不贴上来,我就要忘了. 看到一篇文章有这样的变换,挺有意思的,就拿来试了一下,文章点此. 全景图到穹顶图变换,通俗的说就是将全景图 ...

  8. java面试题----String、StringBuffer、StringBudder区别

    面试题1 - 什么情况下用+运算符进行字符串连接比调用StringBuffer/StringBuilder对象的append方法连接字符串性能更好? 面试题2 - 请说出下面程序的输出. class ...

  9. 面向对象设计中private，public，protected的访问控制原则及静态代码块的初始化顺序

    第一:private, public, protected访问标号的访问范围. private:只能由          1.该类中的函数          2.其友元函数访问 不能被任何其他访问,该 ...

  10. Flask入门flask-script 蓝本 钩子函数(三)

    1 flask-script扩展库 概念: 是一个flask终端运行的解析器 ,因为项目完成以后,代码改动会有风险,所以借助终端完成不同启动项的配置 安装 pip3 install flask-scr ...