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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
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
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
学习ExtJS form布局
2009/10/08 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
js时间控件只显示年月
2017/01/08 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
vue组件生命周期详解
2017/11/07 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
Python中变量交换的例子
2014/08/25 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
通过实例解析python and和or使用方法
2020/11/14 Python
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
好军嫂事迹材料
2014/01/15 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
一份文言文检讨书
2014/09/13 职场文书
2014年创卫工作总结
2014/11/24 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
DE1103使用报告
2022/04/05 无线电