模态框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 打包下载：
稍全功能最基本接入（已修改弹出的模态框标题与内容源码字体大小为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快速引入的更多相关文章
- 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 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
随机推荐
- [Spark性能调优] 源码补充 : Spark 2.1.X 中 Unified 和 Static MemoryManager
本课主题 Static MemoryManager 的源码鉴赏 Unified MemoryManager 的源码鉴赏 引言 从源码的角度了解 Spark 内存管理是怎么设计的,从而知道应该配置那个参 ...
- Mac下jenkins用户权限配置错误，导致登录时提示：没有Overall/read权限
由于初次接触jenkins,于是在搭建好jenkins以后,想要对用户进行管理,于是乎开始在系统管理->configure Global Security里设置用户的权限. 在启用安全-> ...
- 自学Aruba1.3-WLAN一些基本常识802.11n速率计算方式、802.11n及802.11AC速率表
点击返回:自学Aruba之路 自学Aruba1.3-WLAN一些基本常识802.11n速率计算 1. 802.11n速率计算方式1.1 802.11n使用的主要技术 802.11n采用MIMO多天线技 ...
- 【数论】洛谷P1372又是毕业季
题目背景 "叮铃铃铃",随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚在毕业 ...
- windows编程学习笔记（三）ListBox的使用方法
ListBox是Windows中的一种控件,一般被当做子窗口使用,Windows中所有子窗口都是通过发送一个通知码到父窗口父窗口通过WM_COMMAND消息接收,并在此消息中处理,并控制子窗口,Lis ...
- linux搭建SS服务
基本准备: 购买主机:www.virmach.com LINUX系统操作经验:vim , apt-get 等命令的使用 putty.exe连接ssh工具的使用 开始 使用putty连接上去,并输入密码 ...
- Effective Java 第三版——22. 接口仅用来定义类型
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...
- CCNA笔记(2)
CCNA第一天笔记:何为因特网?答:因特网,是连接各台pc与终端设备,正是因为有了因特网,我们才能与全世界交流,玩在线游戏,在线学习.因特网给我们教育带来什么方便?答:没有了地域的阻止,可以在线学习, ...
- 2017年第六届数学中国数学建模国际赛(小美赛)C题解题思路
这篇文章主要是介绍下C题的解题思路,首先我们对这道C题进行一个整体的概括,结构如下: C题:经济类 第一问:发现危险人群. 发现:欺诈的方式开始.雇佣或浪漫的承诺. 数据→确定特定的经济萧条地区→确定 ...
- bzoj 4918: 回文数对
传送门 Description 给定区间[L,R],请统计有多少对整数A,B(L<=A,B<=R)满足A xor B的值在二进制表示下,去掉所有前导0后是回文串 Input 第一行包含一个 ...