背景：之前一直用的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. linux下快速安装python3.xx

    安装python3之前的准备工作: 当前环境是centos操作系统[已经安装了gcc++],在安装前需要安装zlib-devel包: yum install zlib-devel yum instal ...

  2. C# ADO.NET 面向对象

    ADO.NET跟面向对象的结合 把面向对象跟数据库连接用 在项目里面创建一个新的文件夹   名字为App_Code 在这个App_Code里面创建几个类 主要为拆分问题,标上序号,先干什么在干什么 实 ...

  3. vue+rest-framework前后端分离整合

    一.vue部分 二.django路由配置 (1)项目urls.py修改如下: from django.conf.urls import url, include urlpatterns = [ # p ...

  4. bootstrap模态框实现相对定位拖拽

    1.正常的拖拽是用绝对定位absolute来实现的,可是bootstrap的模态框是用relative,为了统一更改方便,就照着相对定位来实现拖拽效果. $(".modal .modal-h ...

  5. CSS实现文本周围插入符号

    CSS实现文本周围插入符号的方案 本文要讨论的是如何在文本的周围插入图标,怎么样控制它们之间的位置关系,通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点. 常见设计稿要求 在文 ...

  6. HTML表单特别效果—音量调节，购物数量

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="ra ...

  7. Node.js 操作Mongodb

    Node.js 操作Mongodb1.简介官网英文文档  https://docs.mongodb.com/manual/  这里几乎什么都有了MongoDB is open-source docum ...

  8. freebsd mount linprocfs

    mount用来做什么? to prepare and graft a special device or the remote node(rhost:path) on to the file syst ...

  9. oracle查询所有用户表的表名、主键名称、索引、外键等

    1.查找表的所有索引(包括索引名,类型,构成列): select t.*,i.index_type from user_ind_columns t,user_indexes i where t.ind ...

  10. 三大集合框架之map

    Map 是一种把键对象和值对象映射的集合,它的每一个元素都包含一对键对象和值对象. Map没有继承于Collection接口 从Map集合中检索元素时,只要给出键对象,就会返回对应的值对象. Map是 ...