jQuery+jqmodal弹出窗口实现代码分明


Posted in Javascript onJune 14, 2010

先上图,最终效果如下

 jQuery+jqmodal弹出窗口实现代码分明

点击“信息确认”

 jQuery+jqmodal弹出窗口实现代码分明

就是弹出一个确认窗口,把已经填报的信息都放到里面看看。

信息放里面很简答,主要是弹出窗口要做得好看点。

所以选择了jQuery+jqmodal实现

实现方法如下
1、页面中引用jquery-1.4.2.js和jqModal.js,注意jQuery要在前面,因为jqmodal是以jQuery为基础的。

2、建立jqModal.css,并引用,主要是些美工的东东,注意div.jqmDialog 的 display为 none。高度和宽度要设置好,挡住下面的,好看~~,我偷个懒,把jqmodal示例的css稍微改了下:)如下:

/*div.whiteOverlay { background: url(dialog/jqmBG.gif) white; }*/ 
div.jqDrag {cursor: move;} /* jqmModal dialog CSS courtesy of; 
Brice Burgess <bhb@iceburg.net> */ 
div.jqmDialog { 
display: none; 
position: fixed; 
top: 106px; 
left: 50%; 
margin-left: -450px; 
width: 900px; 
overflow: hidden; 
font-family:verdana,tahoma,helvetica; 
} 
/* Fixed posistioning emulation for IE6 
Star selector used to hide definition from browsers other than IE6 
For valid CSS, use a conditional include instead */ 
* html div.jqmDialog { 
position: absolute; 
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px'); 
} 

/* [[[ Title / Top Classes ]]] */ 
div.jqmdTC { 
background: #d5ff84 url(dialog/sprite.gif) repeat-x 0px -82px; 
color: #528c00; 
padding: 7px 22px 5px 5px; 
font-family:"sans serif",verdana,tahoma,helvetica; 
font-weight: bold; 
* zoom: 1; 
} 
div.jqmdTL { background: url(dialog/sprite.gif) no-repeat 0px -41px; padding-left: 3px;} 
div.jqmdTR { background: url(dialog/sprite.gif) no-repeat right 0px; padding-right: 3px; * zoom: 1;} 

/* [[[ Body / Message Classes ]]] */ 
div.jqmdBC { 
background: url(dialog/bc.gif) repeat-x center bottom; 
padding: 7px 7px 7px; 
height: 630px; 
overflow: auto; 
} 
div.jqmdBL { background: url(dialog/bl.gif) no-repeat left bottom; padding-left: 7px; } 
div.jqmdBR { background: url(dialog/br.gif) no-repeat right bottom; padding-right: 7px; * zoom: 1 } 
div.jqmdMSG { color: #317895; font-size:large; } 

/* [[[ Button classes ]]] */ 
input.jqmdX { 
position: absolute; 
right: 7px; 
top: 4px; 
padding: 0 0 0 19px; 
height: 19px; 
width: 0px; 
background: url(dialog/close.gif) no-repeat top left; 
overflow: hidden; 
} 
input.jqmdXFocus {background-position: bottom left; outline: none;} 
div.jqmdBC button, div.jqmdBC input[type="submit"] { 
margin: 8px 10px 4px 10px; 
color: #777; 
background-color: #fff; 
cursor: pointer; 
} 
div.jqmDialog input:focus, div.jqmDialog input.iefocus { background-color: #eaffc3; }

3、在网页里面建立弹出窗口的div,注意class="jqmDialog"(就是css里面隐藏的那个)

4、在这个div里面把需要显示的东东整好~~过程略:)

5、建立jquerywin.js并引用,注意放到jqmodal引用的后面,原因同上~~,代码如下:

$().ready(function() { 
$('#ex3a').jqm({ 
trigger: '#ex3aTrigger', 
overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */ 
overlayClass: 'whiteOverlay'}); 
/* make dialog draggable, assign handle to title */ // Close Button Highlighting. IE doesn't support :hover. Surprise? 
$('input.jqmdX') 
.hover( 
function(){ $(this).addClass('jqmdXFocus'); }, 
function(){ $(this).removeClass('jqmdXFocus'); }) 
.focus( 
function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); }) 
.blur( 
function(){ $(this).removeClass('jqmdXFocus'); }); 
});

6、注意,里面设置了一个trigger,可以出发弹出窗口,也可以不用trigger,直接使用js出发,方法如下:
<script type="text/javascript" language=javascript> 
function showjqm(){ 
if(document.all.txtTIME_KUAIJI.value!=""){ 
document.all.txtTIME_KUAIJI0.style.color="#317895"; 
document.all.txtTIME_KUAIJI0.innerHTML=document.all.txtTIME_KUAIJI.value;} 
else{ 
document.all.txtTIME_KUAIJI0.style.color="Red"; 
} 
if(document.all.txtTIME_BIRTH.value!=""){ 
document.all.txtTIME_BIRTH0.style.color="#317895"; 
document.all.txtTIME_BIRTH0.innerHTML=document.all.txtTIME_BIRTH.value;} 
else{ 
document.all.txtTIME_BIRTH0.style.color="Red"; 
} 
if( Page_ClientValidate()) 
$('#ex3a').jqmShow(); 
} 
</script>

7、在上面的js里面,其实和弹出窗口直接相关的只有一句$('#ex3a').jqmShow(); 其他的都是验证的信息

8、上面的一段js里面,比较重要的还有这句if( Page_ClientValidate()) ,可以在弹出窗口之前直行页面中所有验证控件的验证工作。

Javascript 相关文章推荐
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
ExtJS 设置级联菜单的默认值
Jun 13 #Javascript
js 未结束的字符串常量错误解决方法
Jun 13 #Javascript
JSON 和 JavaScript eval使用说明
Jun 13 #Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 #Javascript
js null undefined 空区别说明
Jun 13 #Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 #Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 #Javascript
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
js格式化时间小结
2014/11/03 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
js实现微信分享代码
2020/10/11 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python批量修改文件名的示例
2020/09/27 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
事业单位辞职信范文
2014/01/19 职场文书
应届生求职信范文
2014/05/26 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
小学数学国培研修日志
2015/11/13 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
2019入党申请书格式
2019/06/25 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers