jQuery实现单击按钮遮罩弹出对话框效果(2)


Posted in Javascript onFebruary 20, 2017

本文实例为大家分享了jQuery实现弹出对话框的具体实现代码,供大家参考,具体内容如下

首先,这里的引用jquery-1.4.4.min.js和jquery.XYTipsWindow.min.2.8.js这两个js,还有一个jquery.XYTipsWindow.2.8.css话不多说,这里直接上代码,留着以后备用。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<!--使用对画框需要的两个js--> 
 <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script> 
 <script type="text/javascript" src="../js/jquery.XYTipsWindow.min.2.8.js"></script> 
<link href="../css/jquery.XYTipsWindow.2.8.css" rel="external nofollow" type="text/css" rel="stylesheet" /> 
<script type="text/javascript"> 
 $(document).ready(function() { 
  
 $("#change").click(function(){ 
 
  $.XYTipsWindow({ 
   ___title:"修改密码", 
   ___boxID:"change_pwd", 
   ___content:"id:pwd", 
   ___width:"200", 
   ___height:"100", 
   ___showbg:true, 
   ___drag:"___boxTitle" 
    
  }); 
   
  
 }); 
  
 $("#no").click(function(){ 
  //alert("ss"); 
  $.XYTipsWindow.removeBox(); 
  }); 
   
 $("#ok").click(function(){ 
  //alert("ss"); 
  $.XYTipsWindow.removeBox(); 
  //获取input的值 
  //$(".newpwd").val() 
  }); 
   
   
  
  
 }) 
 </script> 
 
</head> 
 
<body style="text-align:center; padding-top:100px;"> 
<button id="change">修改密码</button> 
<div id="pwd"><div class="input"><input class="newpwd" value="请输入" stylr="color:gray;" onfocus="javascript:if(this.value == '请输入') this.value='';this.style.color='#00CCCC';" 
onblur="javascript:if(this.value == '') this.value='请输入';this.style.color='gray';"/></div> 
<div class="button"> 
<input id="ok" type="button" value="确定"/> 
<input id="no" type="button" value="取消"/> 
</div> 
</div> 
<style type="text/css"> 
 #pwd{ 
 display:none; 
 } 
  
 .button{ 
 margin-bottom:10px; 
 padding-top:10px; 
 } 
 .newpwd{ 
 margin:10px; 
 border:1px thin; 
 } 
</style> 
</div> 
</body> 
</html>

效果图:

jQuery实现单击按钮遮罩弹出对话框效果(2)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
详解vue表单——小白速看
Apr 08 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
原生JS实现分页
Apr 19 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 #Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 #Javascript
原生node.js案例--前后台交互
Feb 20 #Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 #Javascript
jQuery实现链接的title快速出现的方法
Feb 20 #Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 #Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 #Javascript
You might like
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
逻辑链路控制协议
2016/10/01 面试题
师范生自我鉴定范文
2013/10/05 职场文书
生日邀请函范文
2014/01/13 职场文书
文明学生标兵事迹
2014/01/21 职场文书
公司授权委托书范本
2014/09/18 职场文书
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers