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 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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下实现折线图效果的代码
2007/04/28 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
PHP在线书签系统分享
2016/01/04 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
JS正则替换去空格的方法
2017/03/24 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python使用tkinter实现简单计算器
2018/01/30 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Python合并多个Excel数据的方法
2018/07/16 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
中学清明节活动总结
2014/07/04 职场文书
单位授权委托书范文
2014/08/02 职场文书
2014年车间工作总结
2014/11/21 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
学生会招新宣传语
2015/07/13 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
Python使用永中文档转换服务
2022/05/06 Python
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android