背景：之前一直用的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. Android-自定义View实现ImageView播放gif

    http://blog.csdn.net/guolin_blog/article/details/11100315 总体思路是这样的 PowerImageView类继承ImageView类 给Powe ...

  2. Django组件——forms组件

    一.校验字段功能 通过注册用户这个实例来学习校验字段功能. 1.模型:models.py from django.db import models # Create your models here. ...

  3. iOS中使用RNCryptor对资源文件加密

    原文:http://blog.csdn.net/chenpolu/article/details/46277587 RNCryptor源码https://github.com/RNCryptor/RN ...

  4. dl +rec

    AutoEncoder http://blog.csdn.net/studyless/article/details/70880829

  5. win7下tomcat5.5无法通过ip和127.0.0.1访问的解决方法

    解决办法:找到tomcat5.5目录下的conf\server.xml文件,原文如下: <Connector port="8080" maxHttpHeaderSize=&q ...

  6. 导出word的另类做法

    一.背景 项目中经常有导出word的功能,一般用poi来做,但在要求外观较高的情况下,用poi来做基本不能满足需求 而事实上word除了我们一般使用的模式外,还存在xml.与html模式(你没看错,右 ...

  7. python编写脚本，删除固定用户下的所有表

    脚本如下: [oracle@ycr python]$ more t_del.py #/usr/bin/python#coding:utf8 import sysimport cx_Oracle i=0 ...

  8. June 04th 2017 Week 23rd Sunday

    It is not the mountain we conquer but outselves. 我们要征服的不是高山,而是我们自己. After days of hard working, I sl ...

  9. 别跑了，看看脚下有木有money

       别跑了,看看脚下有木有money 1.长大论坛   本来是想做个博客的,无奈级别不够,博客过于复杂,所以就做了这个类似于贴吧的东西.在这里,你可以发帖:可以吐槽学校.可以向他人寻求帮助.甚至可以 ...

  10. kahadb设计

    Kahadb设计思想   简介 hakadb是activemq的持久化数据库,作为消息队列的存储,每个消息有一个消息ID,提供了对消息的快速的查找,更新,以及消息的事物支持,以及意外磬机之后的恢复.丰 ...