运用JQuery的toggle实现网页加载完成自动弹窗
toggle()事件 它主要切换元素的可见状态。
1、toggle(switch) ①switch是一个可选值,如果不填则原来元素是显示则将其隐藏,如果是隐藏则显示。
<p>Hello</p><p style="display: none">Hello Again</p>
$("p").toggle()
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
② switch如果有值则是TRUE或false,如果是TRUE则显示元素,FALSE隐藏元素。
HTML
代码如下:
<p id = "tt">Hello</p>
<input type="button" value="变换" id="b">
var i = 0;
$("#b").click(function(){
$("#tt").toggle(i++%2==0);
});
2、toggle(speed, [callback]) speed是可选参数它表示元素动画的速度,元素以动画的“滑动”的方式进行显示或隐藏,它的值可以使(slow、 normal 、fast); [callback]为函数可以执行的方法。
<p style="display: none" id = "t">Hello Again</p>
$("#t").toggle("slow",function(){
alert("123456");
});
即:当用运用第二种方法时,隐藏speed则可以进行网页加载自动弹屏
相关推荐
-
jquery制作弹窗提示窗口代码分享
复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><!--[if IE 6]><script type="text/javascript" src="js/iepngfix_tilebg.js"></script><![endif]--><s
-
一款基于jQuery的图片场景标注提示弹窗特效
今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: 复制代码 代码如下: <div class="container"
-
jquery ui dialog实现弹窗特效的思路及代码
今天我们用jquery ui dialog来做一个弹窗特效.我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的...实现这一切,只要以下代码: 我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery ui,我们做弹窗就是这么简单...当然了,大家可以看到,我还有一个插入数据的功能,这个功能,我采用了jquery 的appendto: 我先通过变量获取值,接着建了
-
jquery弹窗插件colorbox绑定动态生成元素的方法
colorbox是jquery一个非常好用的弹窗插件,功能十分丰富,使用体验也很好. colorbox官网:http://www.jacklmoore.com/colorbox/ 刚才在是用colorbox的时候遇到了一个问题,这个问题以前没有注意过. 以前我都是讲这个插件使用在静态HTML元素中的,今天为动态生成的元素绑定的时候发现不能用了. 常规的用法是这样的: 复制代码 代码如下: <a class="test" href="test.jpg" titl
-
jQuery探测位置的提示弹窗(toolTip box)详细解析
这里我用jQuery做了个提示弹窗的js,并做了个小demo,简单总结下: 方位 根据当前鼠标所处的位置不同,箭头所指向的方向也不同: 左上方(left-top)(缺省).左下方(left-bottom).右上方(right-top).右下方(right-bottom).上左方(top-left).上右方(top-right).下左方(bottom-left).下右方(bottom-right) 优先级 以上各种情况优先级依次降低 探测思路 探测基本思路是: 首先,也是前提条件,判断容器的高或宽
-
简单实现jQuery弹窗效果
本文实例为大家分享了jQuery弹窗效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗</title> <script type="text/javascript" src="../jquery-3.2.1.min.js&
-
Jquery实现自定义弹窗示例
在项目开发中,如果我们使用javascript自带的提示对话框,感觉不怎么美观,所以我们通常都是自己定义一些对话框,这里我实现点击按钮就弹窗一个登录的窗口,点击该窗口并可以实现拖拽功能,太多文字的东西说不清楚,直接用代码说话. 这里我将HTML.CSS.Jquery代码分别贴出来 HTML部分: 复制代码 代码如下: <button id="show" class="alter">弹窗</button> <!-- 弹窗部分-->
-
jquery模拟alert的弹窗插件
演示地址: http://runjs.cn/detail/miwszbne 分享说明: 第N次造轮子了,只为最简单的调用,jquery模拟alert和confirm的弹窗插件 调用方法: $.alert('your message'); $.alert('your message',function(){ $.alert('click ok button') }); $.confirm('your message'); $.confirm('your message',function(resu
-
小巧强大的jquery layer弹窗弹层插件
先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两种风格. [
-
jQuery实现弹窗居中效果类似alert()
效果图如下所示: 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出确认框始终位于窗口的中间位置的测试</title> <style type="text/cs
随机推荐
- JS及PHP代码编写八大排序算法
- Spring-boot JMS 发送消息慢的解决方法
- Windows longhorn长牛角4074英文测试版光盘安装过程详细图解
- WinGate常见问题解答
- java解析XML几种方式小结
- Perl Mysql数据库操作实现代码
- python网络编程学习笔记(二):socket建立网络客户端
- C# 键盘Enter键取代Tab键实现代码
- 纯JS打造网页中checkbox和radio的美化效果
- 关于PHP中操作MySQL数据库的一些要注意的问题
- JSP验证码简单生成方法
- Linux shell脚本基础学习详细介绍(完整版)第1/2页
- VML网页文件的基本格式
- Java使用Hutool实现AES、DES加密解密的方法
- 微信小程序之选项卡的实现方法
- Python常用知识点汇总
- 地址栏上的一段语句,改变页面的风格。(教程)
- 土人系列AS入门教程 -- 对象篇
- Android 实现永久保存数据的方法详解
- ThinkPHP表单数据智能写入create方法实例分析