网站制作设计培训多少钱,域名如何备案,机械 网站源码,做网站有哪些平台下面直接给你最实用、最常见的创建对话框#xff08;dialog#xff09;方法#xff0c;jQuery EasyUI 的 dialog 组件其实就是 window 的子类#xff0c;专门为对话框场景优化了默认样式和行为#xff08;默认带底部按钮栏、自动居中、模态等#xff09;#xff0c;复制…下面直接给你最实用、最常见的创建对话框dialog方法jQuery EasyUI 的dialog组件其实就是window的子类专门为对话框场景优化了默认样式和行为默认带底部按钮栏、自动居中、模态等复制粘贴就能弹出超级专业的确认框、表单框、详情框领导最爱的“标准弹窗对话框”全都有方法1最简单最常用 - 基本对话框推荐现在就用这个3秒出效果!-- 定义一个对话框 --dividdlgclasseasyui-dialogtitle用户登录stylewidth:400px;height:300px;padding:20px;data-optionsiconCls:icon-login, modal:true, !-- 模态遮罩 -- closed:true, !-- 默认关闭 -- buttons:#dlg-buttons!-- 指定底部按钮栏 --formidloginFormmethodpostdivstylemargin-bottom:20px;inputclasseasyui-textboxnameusernamestylewidth:100%;data-optionslabel:用户名:,required:true,iconCls:icon-man/divdivstylemargin-bottom:20px;inputclasseasyui-passwordboxnamepasswordstylewidth:100%;data-optionslabel:密码:,required:true/divdivstylemargin-bottom:20px;inputclasseasyui-checkboxnamerememberlabel记住登录状态/div/form/div!-- 底部按钮栏 --dividdlg-buttonsahrefjavascript:void(0)classeasyui-linkbutton c6iconClsicon-okonclicksubmitLogin()登录/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-cancelonclick$(#dlg).dialog(close)取消/a/div!-- 触发打开对话框的按钮 --divstylepadding:20px;ahrefjavascript:void(0)classeasyui-linkbutton c8iconClsicon-loginonclick$(#dlg).dialog(open)打开登录对话框/a/divscriptfunctionsubmitLogin(){if($(#loginForm).form(validate)){$.messager.progress();// 显示进度条// 模拟登录setTimeout(function(){$.messager.progress(close);$.messager.alert(成功,登录成功欢迎回来,info);$(#dlg).dialog(close);},1000);}}/script效果标准登录对话框带表单验证、底部“登录/取消”按钮、自动居中、模态遮罩超级专业方法2JS动态创建对话框更灵活适合通用弹窗functionopenCommonDialog(title,content,width,height){$(div idcommonDlg/).appendTo(body).dialog({title:title,width:width||500,height:height||400,modal:true,closed:false,content:content,// 可以直接写HTML字符串buttons:[{text:确定,iconCls:icon-ok,handler:function(){alert(确定操作);$(#commonDlg).dialog(close);}},{text:取消,handler:function(){$(#commonDlg).dialog(close);}}],onClose:function(){$(this).dialog(destroy);// 关闭后销毁}});}// 调用示例functionshowInfo(){openCommonDialog(系统提示,div stylepadding:20px;font-size:16px;这是一个动态创建的对话框/div,400,200);}方法3远程加载内容的对话框超级常用编辑/新增表单divideditDlgclasseasyui-dialogtitle编辑用户stylewidth:600px;height:500px;data-optionsmodal:true, closed:true, buttons:[{ text:保存, iconCls:icon-save, handler:function(){ if($(#editForm).form(validate)){ alert(保存成功); $(#editDlg).dialog(close); } } },{ text:取消, handler:function(){ $(#editDlg).dialog(close); } }]!-- 内容通过href远程加载 --/divscriptfunctionopenEdit(id){$(#editDlg).dialog({title:id?编辑用户:新增用户,href:edit_user.php?id(id||)// 加载远程表单页面}).dialog(open).dialog(center);}/script!-- 调用 --ahrefjavascript:void(0)classeasyui-linkbuttononclickopenEdit(123)编辑用户/aahrefjavascript:void(0)classeasyui-linkbutton c6onclickopenEdit()新增用户/a方法4常用配置汇总复制这些就能做出各种专业对话框$(#dlg).dialog({title:确认删除,width:400,height:200,closed:false,cache:false,modal:true,resizable:false,shadow:true,inline:false,// false绝对定位可拖出浏览器true页面内draggable:true,closable:true,// 显示右上角关闭按钮toolbar:#dlg-toolbar,// 可加顶部工具栏buttons:#dlg-buttons// 底部按钮});你现在直接复制方法1的完整代码到你的页面刷新一下就能看到一个完美的 EasyUI 对话框了dialog比window更适合做表单、确认、提示类弹窗因为默认样式和按钮更标准。想要我给你一个完整的HTML示例带表单验证 远程加载 工具栏 动态创建或者你告诉我你想做什么对话框比如“确认删除”“批量操作确认”“复杂表单”“消息提示框”我2分钟发你精准代码复制就能跑快说说你的具体需求我手把手帮你搞定5分钟内看到超级专业的对话框效果