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>
       

 

 

 

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

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

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

js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //=...
  • anhuidelinger
  • anhuidelinger
  • 2013年11月29日 14:30
  • 410918

jquery实现弹窗表单填写提交

  • 2016年03月21日 14:48
  • 22KB
  • 下载

点击按钮弹出表单对话框带透明遮罩

使用模态对话框来请求用户在一个多步骤过程中输入数据。在内容区域嵌入 form 标记,设置 modal 选项为 true,并通过 buttons 选项来指定主要的和次要的用户动作 1. 按钮 2....
  • u012843873
  • u012843873
  • 2016年12月07日 14:19
  • 2618

jQuery实现弹出窗口中切换登录与注册表单

  • 2017年02月15日 09:39
  • 52KB
  • 下载

实现表单form提交前进行确认提示 表单提交 确认对话框

定义一个函数: function sumbit_sure(){ var gnl=confirm("确定要提交?"); if (gnl==true){ return true; }else{ retu...
  • lanmanck
  • lanmanck
  • 2015年06月04日 08:47
  • 19807

Jquery UI Dialog 之 Form 表单提交

我就不介绍Jquery UI Dialog了,不过其中的一些属性可以到这里去找:http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.htm...
  • u011512316
  • u011512316
  • 2014年01月22日 11:55
  • 2165

form表单提交数据时进行数据验证并提示弹框

{:L('password')} :                         {:L('cofirmpwd')} :                       ...
  • Bigger_High
  • Bigger_High
  • 2016年09月23日 15:36
  • 1457

Jquery UI Dialog 之 Form 表单提交

我就不介绍Jquery UI Dialog了,不过其中的一些属性可以到这里去找:http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.htm...
  • zhanwentao2
  • zhanwentao2
  • 2012年10月11日 17:03
  • 17203

jquery 表单|文本框 漂亮弹框

一个漂亮的jquery表单验证弹框!
  • zou_hailin226
  • zou_hailin226
  • 2013年12月15日 15:17
  • 2007
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件dialog的应用-弹出from表单
举报原因:
原因补充:

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