jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库，可以使用它创建高度交互的 Web 应用程序。

在web页面的开发过程中，在添加元素的时候需要用到弹出窗口添加元素，最简便的就是直接通过一个隐藏的form来提交，在表单显示的时候通过js设置使得页面变暗和不可选，但是这样做未免过于麻烦，所需要的js语句也特别冗长，因此使用jQuery ui所提供的模态表单则显得简洁不少:

需要提到的是，jQueryui需要从 jQuery UI 网站上下载 jQuery UI 的副本：http://jqueryui.com/download/

然后根据自己的选择下载相应的组件

或者也可以通过jQueryUI的cdn来加载，不过在网速不佳的情况下有加载失败的可能性，下面是jQueryUI的cdn地址

官网CDN：http://code.jquery.com/ui/1.12.1/

大陆CDN加速：

https://cdnjs.loli.net/ajax/libs/jqueryui/1.9.2/

接着介绍模态表单的创建：

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI 对话框（Dialog） - 模态表单</title>

  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

  <link rel="stylesheet" href="jqueryui/style.css">

  <style>

    body { font-size: 62.5%; }

    label, input { display:block; }

    input.text { margin-bottom:12px; width:95%; padding: .4em; }

    fieldset { padding:0; border:0; margin-top:25px; }

    h1 { font-size: 1.2em; margin: .6em 0; }

    div#users-contain { width: 350px; margin: 20px 0; }

    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }

    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }

    .ui-dialog .ui-state-error { padding: .3em; }

    .validateTips { border: 1px solid transparent; padding: 0.3em; }

  </style>

  <script>

  $(function() {

    var name = $( "#name" ),

      email = $( "#email" ),

      password = $( "#password" ),

      allFields = $( [] ).add( name ).add( email ).add( password ),

      tips = $( ".validateTips" );

    function updateTips( t ) {

      tips

        .text( t )

        .addClass( "ui-state-highlight" );

      setTimeout(function() {

        tips.removeClass( "ui-state-highlight", 1500 );

      }, 500 );

    }

    function checkLength( o, n, min, max ) {

      if ( o.val().length > max || o.val().length < min ) {

        o.addClass( "ui-state-error" );

        updateTips( "" + n + " 的长度必须在 " +

          min + " 和 " + max + " 之间。" );

        return false;

      } else {

        return true;

      }

    }

    function checkRegexp( o, regexp, n ) {

      if ( !( regexp.test( o.val() ) ) ) {

        o.addClass( "ui-state-error" );

        updateTips( n );

        return false;

      } else {

        return true;

      }

    }

    $( "#dialog-form" ).dialog({

      autoOpen: false,

      height: 300,

      width: 350,

      modal: true,

      buttons: {

        "创建一个帐户": function() {

          var bValid = true;

          allFields.removeClass( "ui-state-error" );

          bValid = bValid && checkLength( name, "username", 3, 16 );

          bValid = bValid && checkLength( email, "email", 6, 80 );

          bValid = bValid && checkLength( password, "password", 5, 16 );

          bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "用户名必须由 a-z、0-9、下划线组成，且必须以字母开头。" );

          // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/

          bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );

          bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "密码字段只允许： a-z 0-9" );

          if ( bValid ) {

            $( "#users tbody" ).append( "<tr>" +

              "<td>" + name.val() + "</td>" +

              "<td>" + email.val() + "</td>" +

              "<td>" + password.val() + "</td>" +

            "</tr>" );

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

          }

        },

        Cancel: function() {

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

        }

      },

      close: function() {

        allFields.val( "" ).removeClass( "ui-state-error" );

      }

    });

    $( "#create-user" )

      .button()

      .click(function() {

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

      });

  });

  </script>

</head>

<body>

<div id="dialog-form" title="创建新用户">

  <p class="validateTips">所有的表单字段都是必填的。</p>

  <form>

  <fieldset>

    <label for="name">名字</label>

    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">

    <label for="email">邮箱</label>

    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">

    <label for="password">密码</label>

    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">

  </fieldset>

  </form>

</div>

<div id="users-contain" class="ui-widget">

  <h1>已有的用户：</h1>

  <table id="users" class="ui-widget ui-widget-content">

    <thead>

      <tr class="ui-widget-header ">

        <th>名字</th>

        <th>邮箱</th>

        <th>密码</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>John Doe</td>

        <td>john.doe@example.com</td>

        <td>johndoe1</td>

      </tr>

    </tbody>

  </table>

</div>

<button id="create-user">创建新用户</button>

</body>

</html>

效果如下：

点击创建新用户后，原页面变暗，按钮和元素不可选：

使用jQuery ui创建模态表单的更多相关文章

  1. jQuery动态创建form表单并提交到后台(携带一定的数据进行页面跳转)

    今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...

  2. jquery动态创建form表单

    function exportExcel() { var merchantName = $('#merchantName').val(); var merchantNo = $('#merchantN ...

  3. jQuery UI 对话框（Dialog） - 模态表单

    <!doctype html><html lang="en"><head> <meta charset="utf-8" ...

  4. Jquery来对form表单提交（mvc方案）

    来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...

  5. jquery通过class验证表单不能为空

    在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护. 本章将介绍如何利用jQuery,通过为表单配置class进行统一验证.(ID ...

  6. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  7. 快速创建InfoPath表单

    快速创建InfoPath表单 2010年已经过去了一半了,这时候再说初识InfoPath可能会被很多人笑话,但是又有多少人真正认识InfoPath呢?无论你是刚刚 听说这个东西还是它的老相好都请同我一 ...

  8. Cocos2d学习之路三（使用Zwoptex创建精灵表单和CCAnimate动画）

    创建精灵表单: 创建动画先要把图片整合到一个图片上然后生成plist文件: 方法下载Zwoptex软件:http://www.zwopple.com/zwoptex/ 然后打开选择 create ne ...

  9. 运用jQuery写的验证表单

    //运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. c++树的表示方法

    c++树的节点的表示方法: typedef struct Node *Tree; struct Node { int data; Node *left; Node *right; int flag; ...

  2. Redis基础对象

    Redis 中每个对象都由一个 redisObject 结构表示 typedef struct redisObject { //类型 unsigned type:; //编码 unsigned enc ...

  3. World Wind Java开发之三 显示状态栏信息（转）

    http://blog.csdn.net/giser_whu/article/details/40920315 先来看下本篇博客索要达到的效果: 找到源码下的gov.nasa.worldwind.ut ...

  4. 【BZOJ1059】[ZJOI2007] 矩阵游戏（匈牙利算法）

    点此看题面 大致题意: 有一个\(N*N\)的\(01\)矩阵,可以任意交换若干行和若干列,问是否有方案使得左上角到右下角的连线上全是\(1\). 题意转换 首先,让我们来对题意进行一波转化. 如果我 ...

  5. 【转载】2018 hosts 持续更新访问 gu歌【更新于:2018-05-03】

      修改HOSTS实现免费,简单访问谷歌的目的   也是比较稳定的方法.修改hosts.修改hosts的方法,原理在于直接存储谷歌网站的IP地址.这样就不用DNS来解析网址了.也就是说,当我们输入谷歌 ...

  6. [超详细] Python3爬取豆瓣影评、去停用词、词云图、评论关键词绘图处理

    爬取豆瓣电影<大侦探皮卡丘>的影评,并做词云图和关键词绘图第一步:找到评论的网页url.https://movie.douban.com/subject/26835471/comments ...

  7. Java程序设计第四次作业内容 第五次作业10月9号发布，为第三章全部例题

    第六题:使用判断语句,根据数字,输出对应的中文是星期几? 直接使用一个if语句的情况 int weekDay=3; if(weekDay==1){ sop("今天是星期一"); } ...

  8. 项目十八-Hadoop+Hbase分布式集群架构“完全篇”

    本文收录在Linux运维企业架构实战系列 前言:本篇博客是博主踩过无数坑,反复查阅资料,一步步搭建,操作完成后整理的个人心得,分享给大家~~~ 1.认识Hadoop和Hbase 1.1 hadoop简 ...

  9. 麦子学院python开发全套完整无加密课程

    点击了解更多Python课程>>> 麦子学院python开发全套完整无加密课程 第一阶段:Python基础准备 1.Web前端开发之HTML+CSS基础入门 2.Javascript ...

  10. CSS+JS实现流星雨动画

    引言 平常会做一些有意思的小案例练手,通常都会发到codepen上,但是codepen不能写分析.        所以就在博客上开个案例分享系列,对demo做个剖析.目的以分享为主,然后也希望各路大神 ...