jquery插件 弹窗效果添加元素

原创 2012年03月28日 21:43:38

<!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 对话框   $("#dialog".dialog())-->
   <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写的弹窗效果(附源码)

最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己...
  • dyllove98
  • dyllove98
  • 2013年06月18日 21:51
  • 3763

使用两种方式自定义jQuery插件

自定义jquery插件可以在函数级别定义也可在对象级别定义,而每种级别的插件都可以传参和不传参。 1.添加jQuery对象级的插件,是给jQuery类添加方法 写法: [javascript] vie...
  • xygg0801
  • xygg0801
  • 2016年12月06日 09:30
  • 1807

JQuery实现的弹窗效果

这是笔者实际项目中的一个需求,我们先来看看特效。页面加载时弹出窗口,点击关闭案例,窗口消失并呈现动画效果。 实现代码如下: ...
  • Rongbo_J
  • Rongbo_J
  • 2015年06月19日 16:20
  • 1622

JQuery插件--什么?你还不会写JQuery 插件

转摘自:http://www.cnblogs.com/joey0210/p/3408349.html 前言   如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开...
  • szzt_lingpeng
  • szzt_lingpeng
  • 2016年05月10日 17:35
  • 581

ios弹出式效果

文章实现iOS弹出式效果,有阴影有透明度。 项目中引入YZSheetView.h,YZSheetView具体实现如下。 YZSheetView.h #import @interfac...
  • u010376126
  • u010376126
  • 2017年06月30日 10:54
  • 181

jquery插件效果

jquery效果
  • li419357679
  • li419357679
  • 2017年12月06日 14:04
  • 10

弹窗效果

Document   : test     Created on : 2015-2-12, 17:23:26     Author     : ghh --%>      ...
  • guhenghong
  • guhenghong
  • 2015年02月12日 17:45
  • 195

jQuery购物图片中的鼠标悬停显示详细信息效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">      ...
  • haitaoDoit
  • haitaoDoit
  • 2012年03月15日 19:54
  • 4461

js弹窗,div弹窗效果

js弹出窗体(层),在项目中,相信很多人都会遇到,今天,我们来看看是如何实现的。...
  • net2321835700
  • net2321835700
  • 2015年05月21日 22:42
  • 229

jquery之表单插件(获得表单控件的值)

jquery之表单插件(获得表单控件的值)
  • fhd001
  • fhd001
  • 2011年04月11日 13:40
  • 1370
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件 弹窗效果添加元素
举报原因:
原因补充:

(最多只允许输入30个字)