//定义弹框html
<div id="delete" class="easyui-dialog" title="Delete" data-options="closed: true" style="width: 400px; height: 280px;"> <form method="post" class="easyui-form" > <div class="notice">You are deleting a comment now!</div> <div class="delreason"> <input type="radio" checked="true" name="delReason" value="unhealthy" />unhealthy <input type="radio" name="delReason" value="other" />other </div> <input type="hidden" name="itemId" id="itemId" value=""/> <div class="head"> <div><span class="bold">Marks</span></div> </div> <textarea class="textarea" name="delComment" id="delComment"></textarea> <div class="center"> <input onclick="fnSubmit('delete','your request url')" type="button" value="submit"/> </div> </form> </div>
设置一个按钮
<button class="r-button" id="deletebtn">Delete</button>
对应的js操作,初始化弹框以及提交表单
$('#deletebtn').click(function (e) { e.preventDefault(); $('#delete_publicity').dialog({ onOpen:function() { //AAA参数可以为外界变量 $('#itemId').val(AAA); $('#del_post').val('-1'); $('#deleteMarks').val(''); } //也可以在此处设定初始值,而免于在html中设定了 //title: 'My Dialog', //width: 400, //height: 200, //closed: false, //cache: false, //href: 'get_content.php', //modal: true }); $('#delete_publicity').dialog('open'); showModalMask('.modal-mask'); $('#delete_publicity').window('center'); });
提交表单操作
function fnSubmit(id,url) { if(id=='delete_reply'){ //注意,easyui表单提交实际上是利用jquery的serialize方法将表单数据转化为query string的形式append到url地址上 var submitPar = $('#'+id+' form').serialize(); submitPar = submitPar.toString(); var delReason = submitPar.substring(submitPar.indexOf('=')+1,submitPar.indexOf('&')); var delComment = submitPar.substring(submitPar.lastIndexOf('=')+1,submitPar.length); delComment = delComment.trim(); //根据easyui 表单提交的方式,若存在文本框在form内,且输入有空格时 将会将空格对应的转化为+号,具体可参见easyui表单提交部分 if(delReason == 'other' && (delComment==''||/^[\+]+$/.test(delComment))){ $.messager.alert('Notice','Please enter the reason for the deletion'); }else{ ajaxRequest(id,url); } }else{ ajaxRequest(id,url); } function ajaxRequest(id,url){ $('#'+id+' form').form('submit',{ url:url, onSubmit:function(){ //return $(this).form('validate'); }, success:function(data){ if(data){ data = JSON.parse(data); } if(data.code==200){ $('#'+id).dialog('close'); $.messager.alert('Notice',data.message); ***** }else{ ********* } }else{ $.messager.alert('Notice','submit Fail.'); } } }); } }