企业官网建设流程全解析

滁州网站建设电话,云主机开网站教程,wordpress4.7.8,网站部署步骤网站开发jQuery UI Dialog#xff08;对话框#xff09;实例 Dialog 是 jQuery UI 中最常用的组件之一#xff0c;用于创建模态或非模态弹出窗口#xff0c;常用于确认提示、表单编辑、内容预览、登录框、提示消息等。它支持拖拽、缩放、按钮、动画、自动居中等功能。 官方演示地…jQuery UI Dialog对话框实例Dialog是 jQuery UI 中最常用的组件之一用于创建模态或非模态弹出窗口常用于确认提示、表单编辑、内容预览、登录框、提示消息等。它支持拖拽、缩放、按钮、动画、自动居中等功能。官方演示地址https://jqueryui.com/dialog/下面提供几个渐进实例从基础到高级代码使用最新 CDN可直接复制到 HTML 文件测试。1.基础模态对话框点击按钮打开模态窗口遮罩背景阻止页面交互。!DOCTYPEhtmlhtmlheadmetacharsetutf-8titlejQuery UI Dialog 基础示例/titlelinkrelstylesheethref//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.cssscriptsrc//code.jquery.com/jquery-3.6.0.min.js/scriptscriptsrc//code.jquery.com/ui/1.13.2/jquery-ui.min.js/script/headbodybuttonidopenDialog打开对话框/buttondividdialogtitle基本对话框p这是一个模态对话框示例。你可以点击右上角关闭或使用按钮关闭。/p/divscript$(function(){$(#dialog).dialog({autoOpen:false,// 默认不打开modal:true,// 模态背景遮罩width:400,// 宽度height:300// 高度});$(#openDialog).click(function(){$(#dialog).dialog(open);});});/script/body/html2.带按钮的对话框确认/取消自定义底部按钮支持图标和回调。dividconfirmDialogtitle确认删除p此操作不可恢复确定要删除吗/p/divscript$(#confirmDialog).dialog({autoOpen:false,modal:true,resizable:false,buttons:{删除:function(){alert(已删除);$(this).dialog(close);},取消:function(){$(this).dialog(close);}}});// 示例打开方式// $(#confirmDialog).dialog(open);/script3.可拖拽 可缩放 其他高级选项默认支持拖拽标题栏移动添加resizable: true支持缩放。dividadvancedDialogtitle高级对话框p这个对话框支持拖拽、缩放、动画、自动居中。/pimgsrchttps://via.placeholder.com/300x150alt示例图片/divscript$(#advancedDialog).dialog({autoOpen:false,modal:true,width:500,height:400,resizable:true,// 可缩放draggable:true,// 可拖拽默认trueposition:{my:center,at:center,of:window},// 居中show:{effect:fade,duration:500},// 打开动画hide:{effect:explode,duration:500},// 关闭动画closeOnEscape:true// Esc键关闭});/script4.事件监听 动态内容script$(#dialog).dialog({open:function(){console.log(对话框打开);},close:function(){console.log(对话框关闭);},resize:function(event,ui){console.log(新尺寸: ui.size.widthxui.size.height);}});/script小技巧想加载远程内容使用open: function() { $(this).load(remote.html); }非模态modal: false全屏效果width: $(window).width() * 0.9, height: $(window).height() * 0.9多个对话框每个 div 单独初始化即可Dialog 常用于表单验证、Ajax 提交前确认、图片查看器等。如果你需要登录表单对话框、Ajax 加载内容、或无标题栏自定义样式的完整示例请告诉我更多细节