背景：之前一直用的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. mysql的引擎和锁

  2. asp: AJAX Database

    <% @LANGUAGE="VBSCRIPT" CODEPAGE="65001" %> <!DOCTYPE html PUBLIC " ...

  3. python递归锁与信号量

    递归锁 一把大锁在加一把小锁. import threading import time def run1(): print("grab the first part data") ...

  4. June 11th 2017 Week 24th Sunday

    I hope I can find the one who is afraid of losing me. 我希望找到一个担心失去我的人. When I was young, sometimes I ...

  5. ANT 的Table表格样式修改方法

    注:(大家在给页面添加参数或者方法的时候,记得写上注释,方便别人查看) 1.表格行选中样式添加:(可以去beijing,精子库质控统计查看例子) (咱们以前页面上的表格都是在hover时显示选中效果, ...

  6. 科技巨头之微软-Microsoft

    提起微软Microsoft,我想应该是无人不知无人不晓.Windows操作系统,Office办公软件,是我们日常经常用到的工具.而微软的创始人正是前世界首富比尔盖茨. 1997年,我刚上初中.当时学校 ...

  7. CRM中间件里的发布-订阅者模式

    从事务码SMW01里能观察到一个BDOC可能被发送往不止一个目的site去,比如下图所示的5个site都会收到该site,而高亮显示的SMOF_ERPSITE代表ERP系统QI3的client 504 ...

  8. One Order行项目里Item Category是怎么计算出来的

    One Order的行项目里有个字段叫Item Category,我们在行项目里加入一个product后,就会自动带出Item Category来.这个值是怎么计算出来的? 检查CRMD_ORDERA ...

  9. Visual Stuio 2010 常用快捷及操作

    1.如果你想复制一行代码(超级长,鼠标拖老久的),只需要在这行的空白处 CTRL+C 同理,剪贴一行 CTRL+X 删除一行 CTRL+L 2.显示方法里的参数,以前每次都是手动删括号. CTRL+S ...

  10. Spring3+Struts2+Hibernate4+Mybatis整合的一个maven例子

    说明: 1.用了maven去搞这个demo,懒得去导jar包... 2.这个demo用了spring去做Ioc,事务的aop:用了struts2去做“MVC”(没有用到任何UI技术,有点对不起这个MV ...