最基本快速接入

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8.  
  9. <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap.css">
  10. <link rel="stylesheet" href="${pageContext.request.contextPath}/zeroModal.css">
  11.  
  12. <script type="text/javascript" src="${pageContext.request.contextPath}/jquery.2.1.1.min.js"></script>
  13. <script src="${pageContext.request.contextPath}/bootstrap.min.js"></script>
  14. <script type="text/javascript" src="${pageContext.request.contextPath}/zeroModal.min.js"></script>
  15.  
  16. </head>
  17. <body>
  18.  
  19. <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹出模态框</button>
  20. <!-- Modal -->
  21. <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%;">
  22.   <div class="modal-dialog" role="document">
  23.     <div class="modal-content">
  24.       <div class="modal-body" style="height:400px;">
  25.         <div style="height: 18%;border-bottom: 1px solid #eee;padding-top: 10px;padding-left: 30%;">
  26.          <span style="font-size: 16px;display: inline-block;margin-left: 10px;">zhang</span>
  27.         </div>
  28.         <div style="height: 80%;padding-top: 10px;padding-left: 30%;" id="nation_item">
  29.          <span style="font-size: 16px;display: inline-block;margin-left: 10px;">yanan</span>
  30.         </div>
  31.       </div>
  32.     </div>
  33.   </div>
  34. </div>
  35. </body>
  36. </html>
  1. 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）

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8.  
  9. <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap.css">
  10. <link rel="stylesheet" href="${pageContext.request.contextPath}/zeroModal.css">
  11.  
  12. <script type="text/javascript" src="${pageContext.request.contextPath}/jquery.2.1.1.min.js"></script>
  13. <script src="${pageContext.request.contextPath}/bootstrap.min.js"></script>
  14. <script type="text/javascript" src="${pageContext.request.contextPath}/zeroModal.min.js"></script>
  15.  
  16. </head>
  17. <body>
  18.  
  19. <button class="btn btn-primary" id="myModalButton" data-toggle="modal" data-target="#myModal">点击空白退出</button>
  20. <!-- Modal -->
  21. <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%;">
  22.   <div class="modal-dialog" role="document">
  23.     <div class="modal-content">
  24.       <div class="modal-body" style="height:400px;">
  25.         <div style="height: 18%;border-bottom: 1px solid #eee;padding-top: 10px;padding-left: 30%;">
  26.          <span style="font-size: 16px;display: inline-block;margin-left: 10px;">zhang</span>
  27.         </div>
  28.         <div style="height: 80%;padding-top: 10px;padding-left: 30%;" id="nation_item">
  29.          <span style="font-size: 16px;display: inline-block;margin-left: 10px;">yanan</span>
  30.         </div>
  31.       </div>
  32.     </div>
  33.   </div>
  34. </div> 
  35.  
  36.     <div style="position:absolute;width:200px;left:220px;">
  37.         <ol class="rounded-list">
  38.             <li><a href="javascript:_basic()">basic</a></li>
  39.             <li><a href="javascript:_params()">带标题</a></li>
  40.             <li><a href="javascript:_escape()">内容不转义</a></li>
  41.             <li><a href="javascript:_button()">带按钮</a></li>
  42.             <li><a href="javascript:_setsize()">自定义尺寸(px、pt、%)</a></li>
  43.             <li><a href="javascript:_custombutton()">自定义按钮</a></li>
  44.             <li><a href="javascript:_notoverlay()">不要遮罩</a></li>
  45.             <li><a href="javascript:_setOpacity()">设置遮罩层透明度</a></li>
  46.             <li><a href="javascript:_iframe()">嵌套iframe</a></li>
  47.             <li><a href="javascript:_esc()">esc键退出</a></li>
  48.             <li><a href="javascript:_resize()">允许拖放大小</a></li>
  49.             <li><a href="javascript:_maxmin()">允许最大化最小化</a></li>
  50.             <li><a href="javascript:_drag()">点击层任意地方拖动</a></li>
  51.             <li><a href="javascript:_setPosition()">自定义弹框位置</a></li>
  52.         </ol>
  53.     </div>
  54.     <div style="position:absolute;width:200px;left:480px;">
  55.         <ol class="rectangle-list">
  56.             <li><a href="javascript:_loading(1)">等待框1 (loading)</a></li>
  57.             <li><a href="javascript:_loading(2)">等待框2 (loading)</a></li>
  58.             <li><a href="javascript:_loading(3)">等待框3 (loading)</a></li>
  59.             <li><a href="javascript:_loading(4)">等待框4 (loading)</a></li>
  60.             <li><a href="javascript:_loading(5)">等待框5 (loading)</a></li>
  61.             <li><a href="javascript:_loading(6)">等待框6 (loading)</a></li>
  62.             <!--<li><a href="javascript:_progress(1)">progress1</a></li>-->
  63.         </ol>
  64.     </div>
  65.  
  66.     <div style="position:absolute;width:200px;left:760px;">
  67.         <ol class="rounded-list">
  68.             <li><a href="javascript:_alert1()">提示框1 (alert)</a></li>
  69.             <li><a href="javascript:_alert2()">提示框2 (alert)</a></li>
  70.             <li> <a href="javascript:_confirm1()">确认框1 (confirm)</a></li>
  71.             <li> <a href="javascript:_confirm2()">确认框2 (confirm)</a></li>
  72.             <li> <a href="javascript:_error()">失败提示框 (error)</a></li>
  73.             <li> <a href="javascript:_success()">成功提示框 (success)</a></li>
  74.         </ol>
  75.     </div>
  76.     <script>
  77.     function _basic() {
  78.         zeroModal.show();
  79.     }
  80.  
  81.     function _params() {
  82.         zeroModal.show({
  83.             title: 'hello world',
  84.             content: 'this is zeroModal',
  85.             close: false
  86.         });
  87.     }
  88.  
  89.     function _escape() {
  90.         zeroModal.show({
  91.             title: 'hello world',
  92.             content: '<b>this is zeroModal</b>',
  93.             escape: false
  94.         });
  95.     }
  96.  
  97.     function _button() {
  98.         zeroModal.show({
  99.             title: 'hello world',
  100.             content: 'this is zeroModal',
  101.             ok: true,
  102.             cancel: true,
  103.             okFn: function(opt) {
  104.                 console.log(opt);
  105.                 alert('clicked ok and not close');
  106.                 return false;
  107.             }
  108.         });
  109.     }
  110.  
  111.     function _setsize() {
  112.         zeroModal.show({
  113.             title: 'hello world',
  114.             content: 'this is zeroModal',
  115.             width: '60%',
  116.             height: '40%'
  117.         });
  118.     }
  119.  
  120.     function _notoverlay() {
  121.         zeroModal.show({
  122.             title: 'hello world',
  123.             content: 'this is zeroModal',
  124.             width: '60%',
  125.             height: '40%',
  126.             overlay: false
  127.         });
  128.     }
  129.  
  130.     function _iframe() {
  131.         zeroModal.show({
  132.             title: 'hello world',
  133.             iframe: true,
  134.             url: 'http://www.baidu.com',
  135.             width: '80%',
  136.             height: '80%',
  137.             cancel: true
  138.         });
  139.     }
  140.  
  141.     function _esc() {
  142.         zeroModal.show({
  143.             title: 'hello world',
  144.             content: 'this is zeroModal',
  145.             esc: true
  146.         });
  147.     }
  148.  
  149.     function _resize() {
  150.         zeroModal.show({
  151.             title: 'hello world',
  152.             content: 'this is zeroModal',
  153.             width: '60%',
  154.             height: '40%',
  155.             resize: true
  156.         });
  157.     }
  158.  
  159.     function _maxmin() {
  160.         zeroModal.show({
  161.             title: 'hello world',
  162.             content: 'this is zeroModal',
  163.             width: '60%',
  164.             height: '40%',
  165.             max: true,
  166.             min: true
  167.         });
  168.     }
  169.  
  170.     function _loading(type) {
  171.         zeroModal.loading(type);
  172.     }
  173.  
  174.     function _progress() {
  175.         zeroModal.progress();
  176.     }
  177.  
  178.     function _alert1() {
  179.         zeroModal.alert('请选择数据进行操作!');
  180.     }
  181.  
  182.     function _alert2() {
  183.         zeroModal.alert({
  184.             content: '操作提示!',
  185.             contentDetail: '请选择数据后再进行操作',
  186.             okFn: function() {
  187.                 alert('ok callback');
  188.             }
  189.         });
  190.     }
  191.  
  192.     function _confirm1() {
  193.         zeroModal.confirm("确定提交审核吗？", function() {
  194.             alert('ok');
  195.             //return false;
  196.         });
  197.     }
  198.  
  199.     function _confirm2() {
  200.         zeroModal.confirm({
  201.             content: '确定提交审核吗？',
  202.             contentDetail: '提交后将不能进行修改。',
  203.             okFn: function() {
  204.                 alert('ok');
  205.             },
  206.             cancelFn: function() {
  207.                 alert('cancel');
  208.             }
  209.         });
  210.     }
  211.  
  212.     function _error() {
  213.         zeroModal.error('请选择数据进行操作!');
  214.  
  215.         /*zeroModal.error({
  216.             content: '请选择数据进行操作!',
  217.             width: '800px'
  218.         });*/
  219.     }
  220.  
  221.     function _success() {
  222.         zeroModal.success('操作成功!');
  223.     }
  224.  
  225.     function _setOpacity() {
  226.         zeroModal.show({
  227.             title: 'hello world',
  228.             content: 'this is zeroModal',
  229.             width: '60%',
  230.             height: '40%',
  231.             opacity: 0.8
  232.         });
  233.     }
  234.  
  235.     function _drag() {
  236.         zeroModal.show({
  237.             title: 'hello world',
  238.             content: 'this is zeroModal',
  239.             dragHandle: 'container',
  240.             ok: true
  241.         });
  242.     }
  243.  
  244.     function _custombutton() {
  245.         zeroModal.show({
  246.             title: 'hello world',
  247.             iframe: true,
  248.             url: 'http://www.baidu.com',
  249.             width: '60%',
  250.             height: '60%',
  251.             buttons: [{
  252.                 className: 'zeromodal-btn zeromodal-btn-primary',
  253.                 name: '这是自定义按钮',
  254.                 fn: function(opt) {
  255.                     alert(1);
  256.                     return false;
  257.                 }
  258.             }, {
  259.                 className: 'zeromodal-btn zeromodal-btn-default',
  260.                 name: '取消',
  261.                 fn: function(opt) {
  262.                     alert(2);
  263.                 }
  264.             }]
  265.         });
  266.     }
  267.  
  268.     function _setPosition() {
  269.         zeroModal.show({
  270.             title: 'hello world',
  271.             content: 'this is zeroModal',
  272.             top: '30px',
  273.             left: '30px',
  274.             width: '280px',
  275.             height: '600px'
  276.         });
  277.     }
  278.     </script>
  279. </body>
  280. </html>

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

附：

zeroModal官方包.rar

jQuery源码库.zip

官网？

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

  1. Bootstrap 模态框

    Bootstrap 模态框(也可以说的弹出层) 最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可 ...

  2. Bootstrap 模态框(也可以说的弹出层)

    最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html ...

  3. 去除bootstrap模态框半透明阴影

    当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...

  4. Bootstrap3.0学习教程十七：JavaScript插件模态框

    这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...

  5. 关于【bootstrap modal 模态框弹出瞬间消失的问题】

    前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...

  6. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

  7. JavaScript插件——模态框

    Bootstrap3.0学习第十七轮(JavaScript插件——模态框)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  8. Bootstrap入门（二十三）JS插件1：模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  9. 使用bootstrap的插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

随机推荐

  1. 用mint ui去实现滚动选择日期并可以关闭拾取器

    转发要备注出处哈,么么哒 注释的那些部分都是我在尝试的时候写得,留给自己看得,删除不影响效果哈,希望对你们有帮助,比较忙可能写得很粗糙,不好意思,有空再改了 实例一:   <template&g ...

  2. 分享html5的一个拖拽手法

    就是这样的效果:拖拽之前 之后: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. jsp+struts2登录框架模板

    一.建立一个名叫jsp_struts2的项目 二.导入jar包 如上图:jar包导入在WebContent/WEB-INF/lib下 三.建立一个LoginAction类 LoginAction类的s ...

  4. Jquery_基础(一) 常用方法与选择器

    一.Jquery常用方法: $(function(){ //掌握$() 以及function(){} 结合 $("#a01").click(function(){ alert('h ...

  5. MyBatis之基于XML的属性与列名映射

    上一博客主要是对单表的增删改查,比较简单,而且每个属性与table表的列都是一一对应名字也一样,今天主要学习属性与table表列名不一致的处理,主要有两种一是属性与列名不一致,二是枚举的情况,这里暂时 ...

  6. loadrunner中如何将MD5加密的值转换为大写

    上篇博客中写过如何将MD5加密,但是我们在实际的测试过程中可能需要将加密的结果进行大小写转换.我在这次的测试过程中就遇见了这样的问题, 我在测试时发现开发人员代码传的sign值是大写,而我加密出来的s ...

  7. JavaScript判断对象是否含有某个属性

    两种方式,但稍有区别 1,in 运算符 1 2 3 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toStr ...

  8. (转)Android Studio Error:Failed to resolve: com.android.support:appcompat-v7:25.1.0解决方案

    今天不知道为什么导入eclipse项目后就出现了错误,没导入之前是正常使用AS的 Error:(26, 13) Failed to resolve: com.android.support:appco ...

  9. BZOJ2744: [HEOI2012]朋友圈

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2744 最大团是一个np问题.. 对于本题,做它的逆问题,建反图做最大独立集. 对于A最多取出两 ...

  10. node中定时器, process.nextTick(), setImediate()的区别与联系

    1.定时器 setTimeout()和setInterval()与浏览器中的API是一致的,定时器的问题在于,他并非精确的(在容忍范围内).尽管事件循环十分快,但是如果某一次循环占用的时间较多,那么下 ...