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

代码:

 

$("#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>
       

 

 

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值