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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
原生js+ajax分页组件
Jan 30 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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学习之PHP运算符
2006/10/09 PHP
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python生成pdf文件的方法
2014/08/04 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
酒后驾驶检讨书
2014/01/27 职场文书
家长通知书家长评语
2014/04/17 职场文书
营销与策划实训报告
2014/11/05 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
感恩教师主题班会
2015/08/12 职场文书