关闭

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

标签: jquery插件dialogfunctionfloatclassborder
5570人阅读 评论(0) 收藏 举报

代码:

 

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

 

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:453406次
    • 积分:5397
    • 等级:
    • 排名:第4955名
    • 原创:165篇
    • 转载:6篇
    • 译文:0篇
    • 评论:24条
    最新评论