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. Nagios-4.1.1 (OpenLogic CentOS 7.2)

    平台: CentOS 类型: 虚拟机镜像 软件包: apache2.4.6 nagios 4.1.1 php5.4.16 devops monitoring nagios open-source ph ...

  2. StackOverflow之旅<1>------{去掉烦人的"!=null"判断}

    问题 为了避免空指针调用,我们经常会看到这样的语句 if (someobject != null) { someobject.doCalc(); } 最终,项目中会存在大量判空代码,多么丑陋繁冗!如何 ...

  3. void (*signal(int sig, void (*func) (int))) (int)理解

    http://blog.csdn.net/sever2012/article/details/8281271 1.signal( int sig, void (*func)(int))signal是一 ...

  4. opencv与灰度图

    https://blog.csdn.net/qq_32211827/article/details/56854985 首先,灰度图可以是一个通道存成图片,也可以是3个通道存成图片,3个通道存成图片,其 ...

  5. AngularJs学习笔记-数据绑定、管道

    数据绑定.管道 (1)数据绑定(Angular中默认是单向绑定) 1.[]方括号 可以用于子组件传值 由于是单向绑定,所以当子组件中的iStars属性发生改变时,不会影响到父组件中product.ra ...

  6. Cesium专栏-测量工具测距、测面、测高(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  7. java算法面试题：从类似如下的文本文件中读取出所有的姓名，并打印出重复的姓名和重复的次数，并按重复次数排序 ；读取docx 读取doc 使用poi 相关jar包提集提供下载

    从类似如下的文本文件中读取出所有的姓名,并打印出重复的姓名和重复的次数,并按重复次数排序 1,张三,28 2,李四,35 3,张三,28 4,王五,35 5,张三,28 6,李四,35 7,赵六,28 ...

  8. 【NTT】loj#6261. 一个人的高三楼

    去年看过t老师写这题博客:以为是道神仙题 题目大意 求一个数列的$k$次前缀和.$n\le 10^5$. 题目分析 [计数]cf223C. Partial Sums 加强版.注意到最后的式子是$f_i ...

  9. ElasticSearch High Level REST API【2】搜索查询

    如下为一段带有分页的简单搜索查询示例 在search搜索中大部分的搜索条件添加都可通过设置SearchSourceBuilder来实现,然后将SearchSourceBuilder RestHighL ...

  10. Expect自动化交互程序

    Expect介绍: 1.什么是Expect Expect是一个用来实现自动化交互功能的软件套件,基于TCL的脚本编程工具语言,方便学习,功能强大. 2.为什么要使用expcet: 当今的企业运维中,自 ...