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

jquery插件弹窗效果添加元素

2012-03-28 21:43 351 查看

<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dth/xhtml1-transitional.dth">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.th{

background:#F90;

color:#666;

font-size:16px}

.odd{

background-color:#C66;}

</style>

<script language="javascript" type="text/javascript" src="../js/jquery.js"></script>

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

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



<script language="javascript" type="text/javascript">

//当窗体加载完毕的时候触发该匿名函数

//$(document) //把dom对象转换成jQuery对象

//$(document).ready(function(){})

$(function (){

$("#dialog").dialog({

autoOpen:false,

show:"bind",

//modal:true,

buttons:[

{

text:"添加",

click:function add(){

var tr=$("<tr></tr>");

var td1="<th>"+$("#name").val()+"</th><th>"+$("#password").val()+"</th><th>"+$("#email").val()+"</th>";

tr.append(td1);

var table=$("#table1");

table.append(tr);

//$(this).dialog("close");

}

},{

text:"取消",

click:function (){

$(this).dialog("close");

}

}

],

draggable:true,

position:"center",

closeOnEscape:false,

width:600,

height:300,

resizable:false,

zIndex:-4,

hide:"explode"

});

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

$("#dialog").dialog("open");

});

});

</script>

</head>

<body>

<h1>模拟dialog效果</h1>



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

<tr>

<th class="th">姓名</th>

<th class="th">密码</th>

<th class="th">邮箱</th>

</tr>

<tr>

<th>张三</th>

<th>123456</th>

<th>9776845943@qq.com</th>

</tr>

<tr>

<th>李四</th>

<th>123456</th>

<th>859486958@qq.com</th>

</tr>

</table>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<a href="#" id="dialog_link"class="ui-state"><span>create new tr</span></a>



<div id="dialog" align="center">

姓名：<input name="" type="text" id="name"/><p>

密码：<input name="" type="text" id="password"/><p>

email：<input name="" type="text" id="email"/><p>

</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航

jquery插件 弹窗效果添加元素

jquery插件弹窗效果添加元素