您的位置：首页 > Web前端 > JQuery

jquery实现弹窗效果与表格中信息的添加

2012-03-28 17:31 1771 查看

<!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>

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />

<script type="text/javascript">

$(function(){

$("#dialog").dialog({

autoOpen:false, //设置对话框打开的方式不是自动打开

show:"blind", //打开时的动画效果

hide:"explode", //关闭时的动画效果

modal:true, //true遮罩效果 false非遮罩效果

buttons:{

//添加按钮的操作

"确定":function(){

//alert("提交");

$("<tr>"+"<td>"+$("#name").val()+"</td>"+"<td>"+$("#email").val()+"</td>"+"<td>"+$("#password").val()+"</td>"+"</tr>").appendTo("#tab");

//$("#tab").append("<tr>"+"<td>"+$("#name").val()+"</td>"+"<td>"+$("#email").val()+"</td>"+"<td>"+$("#password").val()+"</td>"+"</tr>")

$(this).dialog("close"); //关闭对话框

},

"取消":function(){

//alert("确定取消吗");

$(this).dialog("close"); //关闭对话框

}

},

draggable:true, //true表示可以拖动（默认的），false不可以拖动

//closeOnEscape:false, //是否采用esc键关闭对话框，false不采用。true采用，为默认的

title:"添加用户操作界面", //对话框的标题

position:"center", //对话框弹出的位置（top left right center bottom 默认值是center）

width:400, //对话框的宽度

height:300, //对话框的高度

resizable:true, //是否可以改变的操作 true可以改变尺寸，默认值为true

zIndex:6,

});

//触发连接的事件当你点击时连接打开一个对话

$("#dialog_link").click(function(){

$("#dialog").dialog("open"); //open参数打开对话框

});

});

</script>

<style>

#tab{

border-collapse:collapse;

}

</style>

</head>

<body>

<h1>Existing Users:</h1>

<table width="500" border="1" id="tab">

<tr style="background-color:#CCC">

<td>Name</td>

<td>Email</td>

<td>Password</td>

</tr>

</table><br /><br /><br /><br />

<a href="#" id="dialog_link">Create new user</a>

<br /><br />

<div id="dialog" title="hi!">

Name:<br />

<input type="text" id="name" /><br />

Email:<br />

<input type="text" id="email" /><br />

password:<br />

<input type="password" id="password" /><br />

</div>

<br /><br />

Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航