| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>umtry.com</title> <meta name="author" content="umtry" /> <meta name="copyright" content="2011-2099 umtry.com" /> <link rel="stylesheet" type="text/css" href="http://a.tbcdn.cn/s/kissy/1.2.0/cssbase-min.css" /> <script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script> <style> /*******全局***************/ body{background:url(../images/bg.jpg) no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:12px;} table{} tr{} th{width:130px;vertical-align:top;} th.ltitle{text-align:right;padding:7px 10px;} th.bgc{background-color:#edfaff;} td{vertical-align:top;padding:7px 7px;} /*******通用弹出层***************/ .dialog{position:absolute;left:-9999px;top:-9999px;} .pupo{background-color:#ffffff;border:1px solid #c2d5e3;padding:1px 2px;} .pupo .header{-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;background-color:#6ecff9;font-size:15px;font-weight:border;padding:4px 5px;} .pupo .body{padding:5px 5px;} .pupo .footer{text-align:right;} /*******弹出层底部按钮****************/ .my-button-cls { text-align: center; background: #AACF4C; border: 1px solid #86A33B; padding: 4px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; color: white; margin: 10px 10px; cursor: default; } </style> </head> <body> <input type="button" name="addnotice" id="addnotice" value="点我试试"> <!-------------------------------------------------------> <div class='dialog pupo' id='notice_dialog'> <div class='content'> <div class='header'> 课题审批 </div> <div class='body'> <form action="project.php?mod=detail&do=doaddnotice" name="aj_notice" id="aj_notice" method="POST"> <table> <tr> <td>课题名称：</td><td>论武力的作用</td> </tr> <tr> <td>公告类型</td> <td> <select name="ntype"> <option value=1> 组内公告 </option> <option value=2> 全站公告 </option> </select> </td> </tr> <tr> <td>公告内容：</td><td><textarea cols="50" rows="5" name="content" id="content"></textarea></td> </tr> </table> <input type="hidden" name="pid" id="pid" value="<{$project.project_id}>"> </form> </div> <div class='footer'> </div> </div> </div> <!----------------------------------------------------------> <script type="text/javascript"> //与原来的代码相比，这里又多引入了连个文件‘validation’和‘dd’，一个实现验证功能，一个实现拖动功能 KISSY.use("ua,node,overlay,button,validation,dd", function(S, UA, Node, O, Button, Validation, DD) { var d = new O.Dialog({ srcNode: "#notice_dialog", width: 400, closable: false,//去除右上角的关闭符号"X" elStyle:{ position: UA.ie == 6 ? "absolute" : "fixed" }, align: { points: ['cc', 'cc']//弹出层的位置，在浏览器正中央 }, effect: { effect:"fade",//以渐进的效果显示弹出层, duration:0.5 }, header:Node.one('.header'), body:Node.one('.body'), footer:Node.one('.footer'), mask: true }); // 生成两个按钮 var ok = new Button({ content: " 确 认 ", render: d.get('footer'), width:50, elCls: 'my-button-cls', tooltip: "点击发布公告" }); var cancel = new Button({ content: " 关 闭 ", render: d.get('footer'), width:50, elCls: 'my-button-cls', tooltip: "点击关闭" }); ok.render();//渲染确认按钮 cancel.render();//渲染关闭按钮 //验证必填项 var verifyform = new Validation('#aj_notice',{ style:"under" }); verifyform.add("#content",{ length:[1,10] //限制公告内容的长度。此行注释掉后就只会判断是否填写。更多的配置项请查询KISSY API }); Node.one('#addnotice').on('click', function(e) {//点击按钮触发 d.show(); }); ok.on("click",function(){//点击确认按钮触发 //判断必填项是否填写 var isValid = verifyform.isValid(); if(!isValid){ return false; } d.hide(); S.DOM.get('#aj_notice').submit();//这里就是点击确认后提交弹出层表单 }); cancel.on("click",function(){//点击关闭按钮触发 d.hide(); }); }); </script> </body> </html> |
|
时间： 2024-09-24 07:50:59