jQuery实现单击按钮遮罩弹出对话框效果(2)

2024-11-01 00:37:26

本文实例为大家分享了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实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化.截图如下(以天猫为例) 如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧. 首先是页面的布局部分:delete.html 复制代码代码如下: <!DOCTYPE html> <html> <h
jQuery实现首页悬浮框

本文实例为大家分享了jQuery实现首页悬浮框的具体代码,供大家参考,具体内容如下基于jQuery实现首页悬浮框,如下图所示 1.在页面中引入jQuery.bay-window.js,jQuery.bay-window.js的代码如下: !function($){ /** * Description: jquery飘窗插件,可自适应浏览器宽高的变化 * Author: ddqre12345 * CreateTime: 2017.5.3 * param: args={
jQuery实现点击按钮弹出可关闭层的浮动层插件

本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件.分享给大家供大家参考.具体如下: 这是一款由漫画Jquery弹出层插件改编而来,小鸟Js弹窗插件,按ESC可以关闭窗口.默认不带样式,大家可以根据自己的项目写样式.弹出层代码很小,min版的只1.15k,因为小所以值得应用.希望有网友可以再改进,希望她变得更小. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-alert-dlg-plug-codes/ 具
jQuery实现单击按钮遮罩弹出对话框效果（1）

本文实例为大家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码,供大家参考,具体内容如下看到网上一位大神的代码后,大概进行了注释,调试了一下页面以后感觉不错,留作以后使用. 主要用到了:/jquery-1.10.2.min.js 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <tit
jquery实现界面点击按钮弹出悬浮框

本文实例为大家分享了jquery实现界面点击按钮弹出悬浮框的具体代码,供大家参考,具体内容如下首先定义两个div: 一个是背景,一个是悬浮窗. <input id="Button1" type="button" value="点击弹出层"/>  <div id="fade" class="black_ove
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框

使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)

今天介绍的Jquery Dialog Plugins AeroWindow ,是其中最个性的一款,因为他拥有神似Windows 7 Aero效果的肉身. 效果图:演示: 官方演示本地演示特点独特: 窗口移动时标题栏反光效果窗口按钮:最小化,减少,最大化和关闭双击窗口标题栏最大化,缩小活动窗口突出显示更改窗口大小(resize) 鼠标拖拽窗口 N多个配置选项配置选项窗口标题窗口的起始位置的X / Y 窗口大小最小的窗口大小打开窗口的可用状态(最小化,最大化,正常) 窗口动画
jQuery点击按钮弹出遮罩层且内容居中特效

本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi
jQuery实现单击按钮遮罩弹出对话框效果(1)

本文实例为大家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码,供大家参考,具体内容如下看到网上一位大神的代码后,大概进行了注释,调试了一下页面以后感觉不错,留作以后使用.主要用到了:/jquery-1.10.2.min.js代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title
jQuery实现单击按钮遮罩弹出对话框效果（2）

本文实例为大家分享了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;
jQuery实现单击按钮遮罩弹出对话框效果(2)

本文实例为大家分享了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;
jQuery实现的AJAX简单弹出层效果代码

本文实例讲述了jQuery实现的AJAX简单弹出层效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
jquery实现简单实用的弹出层效果代码

本文实例讲述了jquery实现简单实用的弹出层效果.分享给大家供大家参考.具体如下: 目前来说,我还是喜欢这个自己改造的弹出层,在项目中用的也是这个.引入了新版的jquery插件,方框及文字都可以自己定义,非常方便,希望大家也喜欢这款弹出层,JavaScript在本例中也充分发挥了作用,对学习JS也是不错的参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ 具体代码如下: <!D
Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)

实现的效果图: 自定义Fragment继承BottomSheetDialogFragment 重写它的三个方法: onCreateDialog() onCreateView() onStart() 他们的执行顺序是从上到下 import android.app.Dialog; import android.content.Context; import android.graphics.Color; import android.graphics.drawable.ColorDrawable;
jquery+css3实现的经典弹出层效果示例

本文实例讲述了jquery+css3实现的弹出层效果.分享给大家供大家参考,具体如下: 可能出现的情况 1)一列都有,按顺序弹出对应的弹出层 2)只有单个一个弹出层 3)不按顺序不按规律随机弹出层 jquery 弹出层解决第一种情况参考资料移动端之"CSS3多动画弹框" 引入jquery JS代码这里关闭用的css3效果实现 <script type="text/javascript"> var w,h,className; function
jQuery在iframe中无法弹出对话框的解决方法

jQuery的弹出框使用很方便,但是如果在iframe中使用则弹不出对话框,而有时候我们还必须得使用iframe而不能用jQuery的load方式,这个时候就需要处理这个问题. 其实也非常简单,思路就是让iframe的父窗口弹出这个对话框.例如: parent.confirmDialog(); 这样就可以用了.不是什么有技术含量的问题,记下来,防止忘记.

jQuery实现单击按钮遮罩弹出对话框效果(2)

相关推荐

随机推荐