js jquery 在弹出对话框里写内容后获取有动画效果

关注

原创最新推荐文章于 2026-04-27 13:41:48 发布 2.2k 阅读 AI 写同款· GEO 优化 ›

使用jQuery EasyUI实现弹出确认对话框和加载效果方法的第一个参数是对话框的标题，第二个参数是对话框的提示信息，第三个参数是回调函数，用于处理用户的确认或取消操作。在进行异步操作或耗时操作时，为了提供良好的用户体验，常常需要显示加载效果。弹出确认对话框是常见的交互组件，用于获取用户的确认或取消操作。方法可以显示加载效果，提升用户体验。然后执行异步操作或耗时操作，待操作完成后，使用。方法可以方便地弹出确认对话框，并根据用户的选择执行相应的操作。在上述示例中，首先创建一个按钮，并绑定点击事件。通过上述示例，可以实现在按钮点击时显示加载效果，增强用户体验。阅读详情

在对话框里写入内容

获取对话框里的内容后显示出来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script language="javascript" src="../jquery插件/jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js"></script>
<script language="javascript" src="../jquery插件/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery插件/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script language="javascript">
//当窗体加载完毕的时候，触发该匿名函数
//$(document) 把dom对象转换成jqery对象

$(function (){
//生成dialog
$("#dialog").dialog({
autoOpen: false,
//建立按钮
buttons:{
"取消":function() {alert("取消");
$(this).dialog("close");},
"确认":function() {
//获取文本值写入表格
$("#tab").append("<tr><td>"+$("#user").val()+"</td><td>"+$("#you").val()+"</td><td>"+$("#pass").val()+"</td></tr>");
$(this).dialog("close");
}
},
closeText: 'show',
dialogClass: 'alert',
title:"nihao",
draggable: false,
position: 'left',
show: 'slide',
width:400

});
$("#dialog_link").click(function (){
$("#dialog").dialog("open");

});

})
</script>
<body>
<h1>模拟dialog效果</h1>
<table width="300" style="border:#999 dotted 1px" id="tab">
<tr>
<td>name</td>
<td>Email</td>
<td>password</td>
</tr>

</table>

<a href="#" id="dialog_link"><span>open</span></a>
<div id="dialog">请输入用户名:<input type="text" value="" id="user"/><br />
请输入邮箱名:<input type="text" value="" id="you"/><br />
请输入密码:<input type="text" value="" id="pass"/></div>
</body>
</html>