模态框zeroModal快速引入

最基本快速接入

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>Insert title here</title>

<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap.css">

<link rel="stylesheet" href="${pageContext.request.contextPath}/zeroModal.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery.2.1.1.min.js"></script>

<script src="${pageContext.request.contextPath}/bootstrap.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/zeroModal.min.js"></script>

</head>

<body>

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹出模态框</button>

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 70%;margin-left: auto;margin-right: auto;margin-top: 20%;">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-body" style="height:400px;">

        <div style="height: 18%;border-bottom: 1px solid #eee;padding-top: 10px;padding-left: 30%;">

         <span style="font-size: 16px;display: inline-block;margin-left: 10px;">zhang</span>

        </div>

        <div style="height: 80%;padding-top: 10px;padding-left: 30%;" id="nation_item">

         <span style="font-size: 16px;display: inline-block;margin-left: 10px;">yanan</span>

        </div>

      </div>

    </div>

  </div>

</div>

</body>

</html>

bootstrap.css、zeroModal.css、jquery.2.1.1.min.js、zeroModal.min.js、bootstrap.min.js 打包下载：

模态框zeromodal最基本快速接入包.rar

稍全功能最基本接入（已修改弹出的模态框标题与内容源码字体大小为24px；，见zeroModal.css中的.zeromodal-header、.zeromodal-body）

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>Insert title here</title>

<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap.css">

<link rel="stylesheet" href="${pageContext.request.contextPath}/zeroModal.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery.2.1.1.min.js"></script>

<script src="${pageContext.request.contextPath}/bootstrap.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/zeroModal.min.js"></script>

</head>

<body>

<button class="btn btn-primary" id="myModalButton" data-toggle="modal" data-target="#myModal">点击空白退出</button>

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 70%;margin-left: auto;margin-right: auto;margin-top: 20%;">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-body" style="height:400px;">

        <div style="height: 18%;border-bottom: 1px solid #eee;padding-top: 10px;padding-left: 30%;">

         <span style="font-size: 16px;display: inline-block;margin-left: 10px;">zhang</span>

        </div>

        <div style="height: 80%;padding-top: 10px;padding-left: 30%;" id="nation_item">

         <span style="font-size: 16px;display: inline-block;margin-left: 10px;">yanan</span>

        </div>

      </div>

    </div>

  </div>

</div> 

    <div style="position:absolute;width:200px;left:220px;">

        <ol class="rounded-list">

            <li><a href="javascript:_basic()">basic</a></li>

            <li><a href="javascript:_params()">带标题</a></li>

            <li><a href="javascript:_escape()">内容不转义</a></li>

            <li><a href="javascript:_button()">带按钮</a></li>

            <li><a href="javascript:_setsize()">自定义尺寸(px、pt、%)</a></li>

            <li><a href="javascript:_custombutton()">自定义按钮</a></li>

            <li><a href="javascript:_notoverlay()">不要遮罩</a></li>

            <li><a href="javascript:_setOpacity()">设置遮罩层透明度</a></li>

            <li><a href="javascript:_iframe()">嵌套iframe</a></li>

            <li><a href="javascript:_esc()">esc键退出</a></li>

            <li><a href="javascript:_resize()">允许拖放大小</a></li>

            <li><a href="javascript:_maxmin()">允许最大化最小化</a></li>

            <li><a href="javascript:_drag()">点击层任意地方拖动</a></li>

            <li><a href="javascript:_setPosition()">自定义弹框位置</a></li>

        </ol>

    </div>

    <div style="position:absolute;width:200px;left:480px;">

        <ol class="rectangle-list">

            <li><a href="javascript:_loading(1)">等待框1 (loading)</a></li>

            <li><a href="javascript:_loading(2)">等待框2 (loading)</a></li>

            <li><a href="javascript:_loading(3)">等待框3 (loading)</a></li>

            <li><a href="javascript:_loading(4)">等待框4 (loading)</a></li>

            <li><a href="javascript:_loading(5)">等待框5 (loading)</a></li>

            <li><a href="javascript:_loading(6)">等待框6 (loading)</a></li>

            <!--<li><a href="javascript:_progress(1)">progress1</a></li>-->

        </ol>

    </div>

    <div style="position:absolute;width:200px;left:760px;">

        <ol class="rounded-list">

            <li><a href="javascript:_alert1()">提示框1 (alert)</a></li>

            <li><a href="javascript:_alert2()">提示框2 (alert)</a></li>

            <li> <a href="javascript:_confirm1()">确认框1 (confirm)</a></li>

            <li> <a href="javascript:_confirm2()">确认框2 (confirm)</a></li>

            <li> <a href="javascript:_error()">失败提示框 (error)</a></li>

            <li> <a href="javascript:_success()">成功提示框 (success)</a></li>

        </ol>

    </div>

    <script>

    function _basic() {

        zeroModal.show();

    }

    function _params() {

        zeroModal.show({

            title: 'hello world',

            content: 'this is zeroModal',

            close: false

        });

    }

    function _escape() {

        zeroModal.show({

            title: 'hello world',

            content: '<b>this is zeroModal</b>',

            escape: false

        });

    }

    function _button() {

        zeroModal.show({

            title: 'hello world',

            content: 'this is zeroModal',

            ok: true,

            cancel: true,

            okFn: function(opt) {

                console.log(opt);

                alert('clicked ok and not close');

                return false;

            }

        });

    }

    function _setsize() {

        zeroModal.show({

            title: 'hello world',

            content: 'this is zeroModal',

            width: '60%',

            height: '40%'

        });

    }

    function _notoverlay() {

        zeroModal.show({

            title: 'hello world',

            content: 'this is zeroModal',

            width: '60%',

            height: '40%',

            overlay: false

        });

    }

    function _iframe() {

        zeroModal.show({

            title: 'hello world',

            iframe: true,

            url: 'http://www.baidu.com',

            width: '80%',

            height: '80%',

            cancel: true

        });

    }

    function _esc() {

        zeroModal.show({

            title: 'hello world',

            content: 'this is zeroModal',

            esc: true

        });

    }

    function _resize() {

        zeroModal.show({

            title: 'hello world',

            content: 'this is zeroModal',

            width: '60%',

            height: '40%',

            resize: true

        });

    }

    function _maxmin() {

        zeroModal.show({

            title: 'hello world',

            content: 'this is zeroModal',

            width: '60%',

            height: '40%',

            max: true,

            min: true

        });

    }

    function _loading(type) {

        zeroModal.loading(type);

    }

    function _progress() {

        zeroModal.progress();

    }

    function _alert1() {

        zeroModal.alert('请选择数据进行操作!');

    }

    function _alert2() {

        zeroModal.alert({

            content: '操作提示!',

            contentDetail: '请选择数据后再进行操作',

            okFn: function() {

                alert('ok callback');

            }

        });

    }

    function _confirm1() {

        zeroModal.confirm("确定提交审核吗？", function() {

            alert('ok');

            //return false;

        });

    }

    function _confirm2() {

        zeroModal.confirm({

            content: '确定提交审核吗？',

            contentDetail: '提交后将不能进行修改。',

            okFn: function() {

                alert('ok');

            },

            cancelFn: function() {

                alert('cancel');

            }

        });

    }

    function _error() {

        zeroModal.error('请选择数据进行操作!');

        /*zeroModal.error({

            content: '请选择数据进行操作!',

            width: '800px'

        });*/

    }

    function _success() {

        zeroModal.success('操作成功!');

    }

    function _setOpacity() {

        zeroModal.show({

            title: 'hello world',

            content: 'this is zeroModal',

            width: '60%',

            height: '40%',

            opacity: 0.8

        });

    }

    function _drag() {

        zeroModal.show({

            title: 'hello world',

            content: 'this is zeroModal',

            dragHandle: 'container',

            ok: true

        });

    }

    function _custombutton() {

        zeroModal.show({

            title: 'hello world',

            iframe: true,

            url: 'http://www.baidu.com',

            width: '60%',

            height: '60%',

            buttons: [{

                className: 'zeromodal-btn zeromodal-btn-primary',

                name: '这是自定义按钮',

                fn: function(opt) {

                    alert(1);

                    return false;

                }

            }, {

                className: 'zeromodal-btn zeromodal-btn-default',

                name: '取消',

                fn: function(opt) {

                    alert(2);

                }

            }]

        });

    }

    function _setPosition() {

        zeroModal.show({

            title: 'hello world',

            content: 'this is zeroModal',

            top: '30px',

            left: '30px',

            width: '280px',

            height: '600px'

        });

    }

    </script>

</body>

</html>

zeroModal稍全功能最基本接入包.rar

附：

zeroModal官方包.rar

jQuery源码库.zip

官网？

模态框zeroModal快速引入的更多相关文章

Bootstrap 模态框
Bootstrap 模态框(也可以说的弹出层) 最近在尝试使用bootstrap的模态框使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可 ...
Bootstrap 模态框(也可以说的弹出层)
最近在尝试使用bootstrap的模态框使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html ...
去除bootstrap模态框半透明阴影
当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...
Bootstrap3.0学习教程十七：JavaScript插件模态框
这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览插件可以单个引入(使用Bootstrap提供的单 ...
关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
用jQuery写了一个模态框插件
用jQuery写了一个模态框插件大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...
JavaScript插件——模态框
Bootstrap3.0学习第十七轮(JavaScript插件——模态框) 前言阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...
Bootstrap入门（二十三）JS插件1：模态框
Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...
使用bootstrap的插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

随机推荐

Python 数据科学系列の Numpy、Series 和 DataFrame介绍
本課主題 Numpy 的介绍和操作实战 Series 的介绍和操作实战 DataFrame 的介绍和操作实战 Numpy 的介绍和操作实战 numpy 是 Python 在数据计算领域里很常用的模块 ...
JMeter插件之 BlazeMeter's XMPP----测试Openfire等
JMeter也可以测试XMPP协议了,之前一直使用Tsung或者是直接写java代码结合Java request来进行,现在可以用BlazeMeter提供的插件来进行XMPP测试,无需过多编码. 首先 ...
推荐！手把手教你使用Git(转载)
转载地址http://blog.jobbole.com/78960/,涂根华的博客. Git基本常用命令如下: mkdir: XX (创建一个空目录 XX指目录名) pwd: ...
Mtklog 分析(学习)
常见log异常类型: JE NE KE EE(external(modem) exception) 一.常见应用异常搜索关键信息 1. 常见应用crash的(系统提示***已停止运行) ,可以在ma ...
Oracle之 11gR2 RAC 修改监听器端口号的步骤
Oracle 11gR2 RAC 修改监听器端口号的步骤说明:192.168.188.181 为public ip1192.168.188.182 为public ip2192.168.188.18 ...
【转载】在Linux下，一个文件也有三种时间，分别是：访问时间、修改时间、状态改动时间
在windows下,一个文件有:创建时间.修改时间.访问时间.而在Linux下,一个文件也有三种时间,分别是:访问时间.修改时间.状态改动时间. 两者有此不同,在Linux下没有创建时间的概念,也就是 ...
开启 TLS 1.3 加密协议，极速 HTTPS 体验
随着互联网的发展,用户对网络速度的要求也越来越高,尤其是目前在大力发展 HTTPS 的情况下,TLS 加密协议变得至关重要.又拍云在 HTTPS 的普及和性能优化上,始终做着自己的努力和贡献.2018 ...
JAVA中的 static使用
主要内容: 1.静态变量 2.静态方法 3.静态代码块静态变量我们知道,可以基于一个类创建多个该类的对象,每个对象都拥有自己的成员,互相独立.然而在某些时候,我们更希望该类所有的对象共享同一个成员 ...
利用 html2canvas 做个简单的诗词卡片生成器
html2canvas 简介 html2canvas 顾名思义,就是一个可以把 DOM 元素转换成图片的类库,常用于网页截图.网页截图常见的应用场景是,在意见反馈里对当前页面进行截图,方便反馈页面出现 ...
使用quartz实现不重启服务器修改自定义配置
为了方便维护系统,开发中通常会设置一些自定义参数,写在单独的配置文件里,需要调整时可直接登录服务器修复配置文件,而不需要修改程序.但尴尬的是,web服务器并不会自动重新加载配置文件,重启服务器又会中断 ...

模态框zeroModal快速引入

模态框zeroModal快速引入的更多相关文章

随机推荐

热门专题