jQuery实现提示框扩展特效 下载

来源:脚本之家  责任编辑:小易  

通过jquery的show()和hide()函数联合使用,实2113现弹出窗口5261。一、show()和hide()函数解析:41021、show() 方法显1653示隐藏的被选元素。注意:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。2、hide() 方法隐藏被选元素。这与 CSS 属性 display:none 类似,但是隐藏的元素不会被完全显示(不再影响页面的布局)。二、设计一个HTML页面,包括一个简单的弹出窗,和一个显示按钮。其中,调用了jquery的以上两个函数。具体代码如下:三、设计遮罩层的样式,如下:四、弹出窗口的css样式,代码如下:五、初始页面如下:六、点击按钮,查看弹出窗口结果:七、关闭弹出窗后,打开开发者中心,如下:,  你好,2113遮罩层样式可以用CSS写,5261用js/jquery控制显示隐4102藏就可以了<!1653DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/jquery-1.8.3.min.js"></script>    <style>        *{padding: 0; margin: 0}        .box{            position: fixed;            width: 100%;            height: 100%;            background: rgba(0,0,0,0.2);            display: none;        }        .box1{            width: 500px;            height: 500px;            position: fixed;left: 50%; top: 25%;            margin-left: -250px;            border: 1px solid #000000;        }    </style>    <script>    </script></head><body>    <div class="box">        <div class="box1">            <a href="javascript:;" onclick="jQuery('.box').hide()" class="close">关闭</a>        </div>    </div>    <a href="javascript:;" onclick="jQuery('.box').show()" class="show">显示</a></body></html>  追问你好,非常感谢,代码可用,但是有个问题 这边为什么要加一个javascript:,可不可以不加,或者替换成别的代码?追答  完全可以去掉href,这里只是个示例,完全可以用button代替,看自己的习惯,我这里用的是a标签  希望可以帮助到你,望采纳本回答被提问者和网友采纳,<div id="show"> <div data-role="controlgroup" id="btnGroups" data-type="vertical" style="min-height:80px; max-height:237px;overflow-y:auto;"> <label for="1">1</label><input type="radio" name="a" id="1" value="1" /> <label for="2">2</label><input type="radio" name="a" id="2" value="2" /> </div> <div class="ui-grid-a"> <div class="ui-block-a"> <a name="yes" data-role="button" style="display: block;font-size:16px;">同意</a> </div> <div class="ui-block-b"> <a data-role="button" id="cancelBtnPage" style="display: block;font-size:16px;">取消2113</a> </div> </div> </div> <div id="bg"></div> <a href="#" data-role="button" id="yesNextBtn" style="display: block;font-size:16px;">同意</a> -------------------------------------------------------------------------------------Js代码 $('#yesNextBtn').click(function(){ //消除radio按钮上的5261checked $('#btnGroups').find('input[type=radio]').each(function(){ $(this).removeProp("checked").checkboxradio("refresh"); }) document.getElementById("bg").style.display ="block"; document.getElementById("show").style.display ="block"; $('html,body').animate({scrollTop: '0px'}, 100);//因为页面很长,有纵4102向滚动条,先让页面滚动到最顶端,1653然后禁止滑动事件,这样可以使遮罩层锁住整个屏幕 $('#bg').bind("touchmove",function(e){ e.preventDefault(); }); }) -------------------------------------------------------------------------------------#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);} #show{display: none; position: absolute; top: 25%; left: 18%; width: 63%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}www.zgxue.com防采集请勿采集本网。

脚本大小:46KB 脚本语言:简体中文 脚本类型:国产软件 脚本授权:免费软件 更新时间:2020-10-13 17:15:49 脚本类别:jQuery 相关链接: 未知官方  演示地址 网友评分:脚本评分 应用平台:Windows平台

扩展jQuery提示框是一个jquery的extend扩展弹框特效,觉得alert,confirm不好看,在jquery下扩展了alert,comfrim函数,简单易用,欢迎下载!

设置一个隐藏的iframe 将下载目标放iframe里 就行了 其实相当于在当前页打开了一个下载页面,只不过这个页面是隐藏的而已

使用方法

MESSAGER插件 $(document).ready(function(){ $.messager.show(0,'我是被弹出来的!'); $("#showMessager300x200").click(function(){ $.messager.lays(300, 200); $.messager.show(0, '300x200的消息'); }); }); 复制上去就行 需要下载2个文件

1. 引入jquery及插件包js

1、加上DIV弹出框 function AddRunningDiv() { $("").css({ display: "block", width: "100%", height: $(document).height() }).appendTo("body"); $("").html("正在处理,请稍候").appendTo("body").css({ display: "block", left: ($(docu

2. 引入插件css

这里有一个弹出框效果 能自定义定位并随屏滚动而不抖动 还可以设置居中 里面有教程和源码

3. 调用插件

windows.open打开另一个页面。 在打开的页面用opener对象来引用原页面窗体对象,然后用opener.document.getElementByID来得到那个文本框对象,对其赋值。

$.alert('提示信息');

$.comfirm('确认提交',confirmFn, cancelFn)

下载地址如下:

1.先获取弹2113窗的宽高;2.点击打开弹窗时,先5261设置弹窗宽高为0;41023.用animate方法,设置宽高,则可以实现1653渐渐增大;4.最小化时也是一样的操作,用animate方式设置弹窗的宽高为0;伪劣代码:var $t = $("弹窗"), w = $t.width(), h = $t.height();$("点击打开弹窗的元素").click(function(){ $t.css({width:0,height:0}).animate({ width: w, height: h },"fast");});$("点击最小化的元素").click(function(){ $t.animate({ width: 0, height: 0 },"fast");}),用jQuery toggle(1000) 方法。 可以参考我的博文《用jQuery toggle函数控制div显示与隐藏》,可以不用alert()方法。自己写一个div,再用text()添加内容,动画用show()和hide(),或者用animate()内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 怎样用jquery实现弹出框的弹出时渐渐增大,最小化时...
  • html5如何实现弹出提示框,并且伴随遮罩层并且可以...
  • jquery 出现 提示框 该怎么实现呢?
  • jquery 怎么设置 像alert 提示框后面的背景变为不...
  • 怎么用jQuery实现不弹新页面下载,就好比如下图一...
  • jquery实现网页右下角弹出框?
  • 如何利用JQuery弹出一个“正在加载,请稍后."的提示框
  • 有没有Jquery弹出登陆框的特效啊?
  • 用jquery实现点击按钮弹出另一个页面效果,急用求代码
  • jq 求Jquery实现鼠标移上弹出提示框,移出消失(实...
  • 网站首页脚本下载广告代码js框架批处理网页相关源码下载网站地图菜单导航tab标签焦 点 图在线客服影音播放相册代码flash特效vbscript其它全屏广告对联广告悬浮漂浮图片特效翻牌书角其他代码jqueryextjsprototypemootoolsajax/javascript其它框架系统优化网络相关文件管理注册表项文本字符安全防毒加密解密特效动画修改更换显示隐藏dos/bathtml5css特效asp源码.net源码php源码jsp源码网页编辑器数据库管理源码黑客源码其它源码主页脚本下载js框架jqueryjquery实现提示框扩展特效require实现弹框加轮播特效jquery实现自定义拖拽插件jquery响应式后台登录界面模板jquery仿windows10桌面开始菜单及开关机特效源码 jquery+moment.js制作富有科技感的svg日期和时钟特效代码jquery手机外卖点餐购物车结算代码jquery触屏电子签名插件jqsignaturejquery仿qq音乐播放器代码jquery仿qq空间留言时间轴特效代码jquery实现生日蛋糕蜡烛动画特效jquery一星期时间段选择插件代码基于jquery实现网页右下角留言表单代码源码jquery+html5实现唯美表白动画代码基于turn.js实现翻书翻页动画效果jquery扩展提示框jquery 最新版框架下载(1.32-1.11.1-3.2.1)jquery 最新版框架下载(1.32-1.11.1-3.2.1)下载《jquery 1.6,1.7 api 中文手册》最新版 chm《jquery 1.6,1.7 api 中文手册》最新版 chm下载jquery easyui v1.3 常用ui组件 demo合集、离线api、动态换肤 jquery easyui v1.3 常用ui组件 demo合集、离线api、动态换肤 下载jquery alert、confirm、prompt提示框插件jquery alert、confirm、prompt提示框插件下载基于jquery的artdialog 弹出窗插件效果 4.1.7基于jquery的artdialog 弹出窗插件效果 4.1.7下载uploadify v3.1 基于jquery的上传插件uploadify v3.1 基于jquery的上传插件下载jquery 图片切换(超炫效果)jquery 图片切换(超炫效果)下载jquery 1.7.2官方版本下载jquery 1.7.2官方版本下载下载jqueyr 消息插件 messager v1.5 仿qq消息弹出提醒jqueyr 消息插件  messager v1.5 仿qq消息弹出提醒下载找不到分享码?jquery实现提示框扩展特效require实现弹框加轮播特效jquery实现自定义拖拽插件jquery响应式后台登录界面模板jquery仿windows10桌面开始菜单及开关机特效源码 jquery+moment.js制作富有科技感的svg日期和时钟特效代码jquery手机外卖点餐购物车结算代码jquery触屏电子签名插件jqsignaturejquery仿qq音乐播放器代码jquery仿qq空间留言时间轴特效代码分享码的获取方法迅雷winrar v5jquery实现提示框扩展特效require实现弹框加轮播特效jquery实现自定义拖拽插件jquery响应式后台登录界面模板jquery仿windows10桌面开始菜单及开关机特效源码 jquery+moment.js制作富有科技感的svg日期和时钟特效代码jquery手机外卖点餐购物车结算代码jquery触屏电子签名插件jqsignaturejquery仿qq音乐播放器代码jquery仿qq空间留言时间轴特效代码chrome
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved