jquery插件dialog的应用-弹出from表单

原创 2012年03月26日 22:02:07

代码:

 

$("#dialog_linkt").click(function(){
 
     $("#dialogt").dialog('open');
     return false;
    });
    
    
    $('#dialogt').dialog({//设置成对话框
     autoOpen: false,//设置对话框是否打开 默认是为 true 打开  false 关闭   文本也将隐藏掉,放入对话框中
     width: 600, //不能加像素px
     buttons: {
      
      "Cancel": function() {
       $(this).dialog("close");
      }
     },
     bgiframe:true,  //隐藏
     
     closeOnEscape:true, //按esc键时,关闭对话框 默认为true
     draggable:true,//拖拽的效果   默认为true
     hide:"slide",//关闭窗体时 
     modal:true, //遮罩效果 默认为 false 地下可以操作
     position:"top", //对话框弹出的位置 默认为中间
     show:"slide",  //动画效果
     title:"修改",//设置对话框的标题
     
     
     
    });

<style type="text/css">
   body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
   .demoHeaders { margin-top: 2em; }
   #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
   #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
   #dialog_linkt {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
   #dialog_linkt span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
  
   ul#icons {margin: 0; padding: 0;}
   ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
   ul#icons span.ui-icon {float: left; margin: 0 4px;}
 </style> 

 

 

<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>修改</a>
       <form id="dialog" action="${pageContext.request.contextPath }/csdn/updateOK.action" method="post">
             <table border="1px">
                 <tr>
                   <td>姓名</td>
                   <td><input type="text" name="username" value="${admins.username}"/></td>
                 </tr>
               
                 <tr> <td>真实姓名</td><td><input type="text" name="realname" value="${admins.realname}"/></td></tr>
                 <tr><td>性别</td><td><input type="text" name="sex" value="${admins.sex}"/></td></tr>
                 <tr> <td>地址</td><td><input type="text" name="address" value="${admins.address}"/></td></tr>
                
                 <tr> <td>电话</td><td><input type="text" name="cellphone" value="${admins.cellphone}"/></td></tr>
                 <tr>  <td>邮箱</td>    <td><input type="text" name="email" value="${admins.email}"/></td></tr>
            
         
                 <tr>
                   <td><input type="submit" value="提交"/> </td>
                   <td><input type="reset" value="重置"/></td>
                 </tr>
             </table>
              <input type="hidden" name="id" value="${admins.id }"/>
         </form>
       

 

 

 

相关文章推荐

Jquery UI Dialog 之 Form 表单提交

我就不介绍Jquery UI Dialog了,不过其中的一些属性可以到这里去找:http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.htm...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

layer.js 弹出层提交form表单,action重定向

layer.js,一个jquery的插件,可以用它来做信息提示,弹出层等。  官方demo地址:http://layer.layui.com/ 官方api地址:http://layer.layui.c...
  • AHAU10
  • AHAU10
  • 2016年04月28日 19:33
  • 21049

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //=...

jquery的layer弹出层框架,如果设置 iframe弹出一个页面里是表单提交,提交完怎么关闭弹出层

分享| 2014-09-24 15:08280885762 | 浏览 12559 次  Javascript 比如说 $('#sdf').on('click', f...

Spring Security 入门

Spring Security 入门详解   序:本文主要参考 spring实战 对里面的知识做一个梳理 1.Spring Security介绍 Spring Se...

Spring、SpringMVC和Mybatis整合

使用SSM(Spring、SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方。之前没有记录SSM整合...

Dialog弹出层Jquery插件多种效果版

  • 2014年11月14日 17:08
  • 69KB
  • 下载

Struts2之ajax提交表单(借助jquery插件)

1 index.jsp pageEncoding="UTF-8"%>         $(document).ready( function() {                  ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件dialog的应用-弹出from表单
举报原因:
原因补充:

(最多只允许输入30个字)