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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 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 注释规范
2012/03/29 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
PHP之header函数详解
2021/03/02 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Python Flask基础教程示例代码
2018/02/07 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
财务出纳岗位职责
2014/02/03 职场文书
房地产营销策划方案
2014/02/08 职场文书
小班秋游活动方案
2014/02/22 职场文书
感恩教育活动总结
2014/05/05 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python