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

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. mfc控件与其对应的对象的关联方法

    对话框的控件与其对应类的对象相关联:(两种方法) (1)      通过CWnd::DoDataExchange函数进行关联: 用VC++6.0的MFC ClassWizard中的Member Var ...

  2. 怎样改动Myeclipse10.7的Servlet模板

    (1)在myeclipse10.0曾经的版本号中咱庄文件夹仅仅有叶仅仅需找到plugins在文件夹下找到: com.genuitec.eclipse.wizards_9.0.0.me201211011 ...

  3. qt新进程工作目录的设置（工作目录确实是被子进程继承的，但也可以设置）

    经过试验,qt启动一个新的进程时,这个进程的工作目录是继承父进程的,无论是通过start还是startDetached来启动. 其实对于linux系统,qt底层应该也是调用fork.exec之类的函数 ...

  4. VC/MFC 在ListCtl 控件中随鼠标移动提示单元格信息

    BEGIN_MESSAGE_MAP(CTipListCtrl, CListCtrl) //{{AFX_MSG_MAP(CTipListCtrl) ON_WM_MOUSEMOVE() ON_WM_DES ...

  5. 【Demo 0011】多媒体播放器

    本章学习要点:       1.  掌握AVAudioPlayer 基本使用;       2.  掌握AVPlayer 基本使用;       3.  掌握系统声音播放以及震动;       4. ...

  6. XML和对象属性互转的基类

    本人做了一个XML和对象属性互转的基类,现在放上来有兴趣拿去看一下,用法很简单,声明一个BaseConversion的子类,该子类与你想转换的对象相对应,然后覆盖基类的两个虚方法,然后在里面写元素与对 ...

  7. Windows查看进程taskList,终止进程tskill

    TaskList:         列出当前所有运行进程.         使用方法:在命令提示符中输入tasklist 然后回车,会看到类似下面的列表: 映像名称                   ...

  8. ThinkPHP 自动创建数据、自动验证、自动完成详细例子介绍（十九）

    原文:ThinkPHP 自动创建数据.自动验证.自动完成详细例子介绍(十九) 1:自动创建数据 //$name=$_POST['name']; //$password=$_POST['password ...

  9. schedule()函数的调用时机（周期性调度）

    今天纠正了一个由来已久的认识错误:一个进程的时间片用完之后,当再次发生时钟中断时内核会调用schedule()来进行调度,把当前的进程上下文切出CPU,并把选定的下一个进程切换进来运行.我一直以为sc ...

  10. OCP读书笔记(3) - 使用RMAN恢复目录

    创建恢复目录 在hndx上创建恢复目录:[oracle@oracle admin]$ export ORACLE_SID=hndx[oracle@oracle admin]$ sqlplus / as ...