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 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
创建一个类Person的简单实例
May 17 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 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
1.PHP简介
2006/10/09 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
jquery 插件开发备注
2010/08/27 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
Saltstack快速入门简单汇总
2016/03/01 Python
python flask 多对多表查询功能
2017/06/25 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python中比较两个列表的实例方法
2019/07/04 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
Java里面有没有全局变量?为什么?
2015/02/06 面试题
餐厅总厨求职信
2014/03/04 职场文书
生物工程专业求职信
2014/09/03 职场文书
上课不认真检讨书
2014/09/17 职场文书
个人作风建设心得体会
2014/10/22 职场文书
地道战观后感500字
2015/06/04 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python
Python实现双向链表
2022/05/25 Python
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers