美高梅官方网站3045-mgm6608美高梅app下载
jQuery+jqmodal弹出窗口实现代码分明-Web前端之家

jQuery+jqmodal弹出窗口实现代码分明-Web前端之家

作者:mgm美高梅 官方网址    来源:未知    发布时间:2019-11-22 19:37    浏览量:

不畏弹出三个认可窗口,把已经填报的音信都停放里面看看。

消息放里面很简答,主借使弹出窗口要做得雅观点。

故此选拔了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 white; }*/ div.jqDrag {cursor: move;} /* jqmModal dialog CSS courtesy of; Brice Burgess */ 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 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 no-repeat 0px -41px; padding-left: 3px;} div.jqmdTR { background: url no-repeat right 0px; padding-right: 3px; * zoom: 1;} /* [[[ Body / Message Classes ]]] */ div.jqmdBC { background: url repeat-x center bottom; padding: 7px 7px 7px; height: 630px; overflow: auto; } div.jqmdBL { background: url no-repeat left bottom; padding-left: 7px; } div.jqmdBR { background: url 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 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,注意 4、在那些div里面把要求出示的东东整好进度略:卡塔尔国5、创建jquerywin.js并引用,注意放到jqmodal引用的前面,原因同上~~,代码如下: 复制代码 代码如下: $ { $.jqm({ trigger: '#ex3aTrigger', overlay: 30, /* 0-100 : 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? $ .hover.addClass; }, function.removeClass .focus{ this.hideFocus=true; $.addClass .blur.removeClass; 6、注意,里面安装了二个trigger,能够出发弹出窗口,也得以毫不trigger,直接行使js出发,方法如下: 复制代码 代码如下:

7、在上头的js里面,其实和弹出窗口间接有关的唯有一句$; 其余的都以认证的音讯 8、上边的大器晚成段js里面,比较首要的还会有这句if( Page_ClientValidate ,能够在弹出窗口从前直行页面中颇负验证控件的证实专业。

友情链接: 网站地图
Copyright © 2015-2019 http://www.zen-40.com. mgm美高梅有限公司 版权所有