jquery中对话框效果(form)

原创 2012年03月28日 20:55:13
<!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 language="javascript" type="text/javascript" src="js/jquery-1.7.1.min.js">
</script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js">
</script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />

<script language="javascript" type="text/javascript">
    
    $(function (){
        $("#dialog").dialog({
            autoOpen:false,
            resizable: false,
            show: "slide",
            hide:"explode",
            width: 460,
            height:300,
            buttons:{
                "确定":function()  {
                         var $addName=$("#name").val();
                     var $addEmail=$("#email").val();
                     var $addSex=$("#sex").val();
                       $("<tr><td>"+$addName+"</td><td>"+$addEmail+"</td><td>"+$addSex+"</td></tr>").appendTo("#users");
                       alert("$addEmail");
                       
                        $(this).dialog("close");
                }
                }
            });
            
            
        $("#dialog_link").click(function(){
            $("#dialog").dialog("open");
        
            });
//提交按钮
});
    
</script>
    <style type="text/css">
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
            #users{
                width:300px;
                }
        </style>
</head>

<body>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>


<!--对话框,在页面中会隐藏-->
<div id="dialog" title="亲爱的,我来了 ">
<form id="shuru">
姓名:<input type="text" id="name" /><br>
<br>
性别:<input type="text" id="email" /><br>
<br>
邮箱:<input type="text" id="sex" />
<span class="ui-widget">
</span>
</form>
</div>
<div id="users-contain" class="ui-widget">
    <h1>Existing Users:</h1>
  <table id="users" class="ui-widget ui-widget-content">

            <tr class="ui-widget-header ">
                <th>Name</th>
                <th>Email</th>
                <th>sex</th>
            </tr>

    </table>
</div>
</body>
</html>


jquery子元素选择器、form属性选择器和实现可以左右选择的下拉菜单效果

1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”)   返回值  集合元素       说明: 匹配其父元素下的第...

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

在对话框里写入内容 获取对话框里的内容后显示出来 无标题文档 //当窗体加载完毕的时候, 触发该匿名函数 //$(documen...

jQuery插件ccdialog 功能齐全的对话框效果【原创】

ccdialog是一个jQuery插件,实现弹出层模式的对话框效果,由于不满足于jQuery本身的dialog插件功能和效果,所有参考了众多dialog插件的效果和实现方式写了ccdialog,功能和...

分享一个JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)

多的不说了,直奔主题,分享一个放大效果的popup dialog,项目中可以根据自己的需求来写css,我打算复用到metro风格的site上去。 看起来动画效果还是比较cool的,如果加上了处理后的...

jQuery的插件 --- 对话框的效果 (有遮罩效果)

jQuery的插件 --- 对话框的效果 (有遮罩效果) "

DLL 信息输入输出到FORM对话框

  • 2010年12月10日 09:42
  • 34KB
  • 下载

vue + ElementUI 关闭对话框清空验证,清除form表单

前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1、首先在你的对话框 取消按钮 加一个...

C#之二十 Win Form对话框

字体对话框FontDialog Windows窗体 FontDialog 组件是一个预先配置的对话框,该对话框是标准的 Windows“字体”对话框,用于公开系统上当前安装的字体。可在基于 W...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery中对话框效果(form)
举报原因:
原因补充:

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