在网上找了一大堆，看的眼花瞭乱，还是研究原码，自已搞出来了！

ui原地址:http://jqueryui.com/dialog/#modal-form

可以把js,css下载到本地，要不然不联网的话，什么都没了!

效果：

代码如下，我是把需要的都下载到了本地，

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>jQuery UI Dialog - Modal form</title>

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

  <script src="jquery-1.9.1.js"></script>

  <script src="jquery-ui.js"></script> 

<script>

$(function(){

	$( "#testDialog" ).dialog({

      autoOpen: false,

      height: 380,

      width: 350,

      modal: true,

      buttons: {

        "确定": function() {

			var pass1V= $("#pass1").val();

			var pass2V=$("#pass2").val();

		 if(checkRegexp(pass1V,pass2V)){

		 if(pass1V!=pass2V){ alert("两次密码输入不一致!");return false;}

		 alert("updateOK");

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

		 }else{

		 alert("请正确输入密码[a-zA-Z0-9] 6-12位");

		 }

         },

		"取消": function() {

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

          }

        }

      });//dialog end;

//验证密码为a-zA-Z0-9 6-12位

function checkRegexp(passVal1,passVal2){

	if(passVal1.length<6||passVal1.length>12){return false;}

	var regexp=/^([0-9a-zA-Z])+$/;

	if(!(regexp.test(passVal1))){return false;}

	return true;

}

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

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

});//open end;

});//jquery end;

  </script>

 <style type="text/css">

#testDialog{display:none; height: 600, width: 650,}

 </style>

</head>

<body>

 <button id="dialogHOpen">dialogHOpen</button>

<div id="testDialog">

请输入新密码:<input type="password" id="pass1"/><br/>

再次输入密码:<input type="password" id="pass2"><br/>

</div>

jquery 弹出登陆框，简单易懂！修改密码效果代码的更多相关文章

  1. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  2. Jquery 弹出提示框输入插件 apprise 修改中文按钮以及使用说明

      apprise的使用非常简单,引入js脚本和css <script type="text/javascript" src="/js/apprise-1.5.fu ...

  3. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页（二）前端修改、添加表格行点击弹出模态框

    在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...

  4. javascript--自定义弹出登陆窗口（弹出窗）

    web开发中浏览器对象封装了诸如prompt.alert.confirm等弹出框,但是有的弹出框并不能满足开发需要,需要我们自己定义弹出框,诸如用户登陆框.消息提示框等.本文利用弹出用户登陆框示例,对 ...

  5. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  6. js+jquery手写弹出提示框

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

  7. datatables.js 简单使用--弹出编辑框或添加数据框

    内容:选中某一条记录,弹出编辑框 环境:asp.net mvc ,  bootstrap 显示效果: 代码: 至于怎么弄多选框,在上一篇博客里已经有说明. 主要用到了bootstrap的模态窗,下面代 ...

  8. 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class，id，type的操作】【jquery选择器】

    1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...

  9. jquery删除记录弹出提示框

    来自于<jquery权威指南> ------------------- 点击删除时,弹出提示框,并做相应的删除确定或取消 完整代码如下: <!DOCTYPE html PUBLIC ...

随机推荐

  1. KDB支持单步调试功能(ARM架构)

    0    实践发现KDB不支持step调试功能 (本文针对的是arm CotexA9架构,各种架构的实现方式不一样,    X86的好像已经支持,不过本人没有验证过) 1    首先看下要调试的代码段 ...

  2. 如何获取本地html文件的标题

    本文用于提取本地网页的标签元素如<TITLE></TITLE>,<IMG>,<A></A>...的内容,非常实用于批量文件的操作,这是按一般 ...

  3. AllocateHWnd的作用，以及它在控件里的使用

    有TTimer,TDragObject,TClipboard用到了这个函数,具体分析,待续...

  4. 【ASP.NET Web API教程】5.2 发送HTML表单数据：URL编码的表单数据

    原文:[ASP.NET Web API教程]5.2 发送HTML表单数据:URL编码的表单数据 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内 ...

  5. iOS 5 故事板入门（3）

    原文: http://www.raywenderlich.com/5138/beginning-storyboards-in-ios-5-part-2 Segues 介绍 是时候在我们的故事板中加入更 ...

  6. apache的开源项目-模板引擎(Velocity)(转)

    然后修改conf文件下的server.xml文件,在server.xml里的           <Connector port="8080" .... />字段后   ...

  7. Org-mode五分钟教程ZZZ - Kaka Abel的日志 - 网易博客

    Org-mode五分钟教程ZZZ - Kaka Abel的日志 - 网易博客 Org-mode五分钟教程ZZZ  

  8. Hibernate（六）——多对多关联映射

    前面几篇文章已经较讲解了三大种关联映射,多对多映射就非常简单了,不过出于对关联映射完整性的考虑,本文还是会简要介绍下多对多关联映射. 1.单向多对多关联映射 情景:一个用户可以有多个角色,比如数据录入 ...

  9. iOS视图控制器之间delegate传值教程

    之前在StackOverFlow上看到一篇讲传值(segue传值和delegate传值)的文章,感觉讲的非常清晰,就将delegate部分翻译了一下.有兴趣能够看看. 原文: http://stack ...

  10. 【错误】expected constructor, destructor, or type conversion before '.' token - 第八个游侠的日志 - 网易博客

    [错误]expected constructor, destructor, or type conversion before '.' token - 第八个游侠的日志 - 网易博客 [错误]expe ...