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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
javaScript基础详解
Jan 19 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
PHP通用检测函数集合
2011/02/08 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
浅析javascript 定时器
2014/12/23 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
python返回昨天日期的方法
2015/05/13 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
英国电子专家:maplin
2019/09/04 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
教师党员公开承诺书
2014/03/25 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python