最基本快速接入
<%@ 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=" 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 打包下载：
稍全功能最基本接入（已修改弹出的模态框标题与内容源码字体大小为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=" 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;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;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;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', '60%', height: '40%' }); } function _notoverlay() { zeroModal.show({ title: 'hello world', content: 'this is zeroModal', '60%', height: '40%', overlay: false }); } function _iframe() { zeroModal.show({ title: 'hello world', iframe: true, url: 'http://www.baidu.com', '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', '60%', height: '40%', resize: true }); } function _maxmin() { zeroModal.show({ title: 'hello world', content: 'this is zeroModal', '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: '请选择数据进行操作!', '800px' });*/ } function _success() { zeroModal.success('操作成功!'); } function _setOpacity() { zeroModal.show({ title: 'hello world', content: 'this is zeroModal', '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', '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', '280px', height: '600px' }); } </script> </body> </html>
附：