jquery实现弹窗效果实例

最新推荐文章于 2024-03-09 21:19:43 发布
最新推荐文章于 2024-03-09 21:19:43 发布
阅读量704 收藏
点赞数 1
分类专栏： jQuery 文章标签： jquery web前端 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ziwoods/article/details/49906637
版权

利用jquery实现两种弹窗效果：

1：淡入弹窗效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{padding: 0;margin: 0;}
			.box{width: 100%;height: 100%;}
			.main{width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);display: none;position: fixed;z-index: 1;}
			.mainbox{width: 800px;height: 100%;margin: 0 auto;background-color: rgba(255,255,255,0.8);padding: 20px;}
			.kkk{width: 100%;height: 1200px;background-color: red;}
			.close{color: red;cursor: pointer;}
		</style>
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(function(){
				$(".btn").click(function(){
					$(".main").fadeIn();
				});
				$(".close").click(function(){
					$(".main").fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<div class="main">
				<div class="mainbox">
					<div class="close">点击关闭</div>
				</div>
			</div>
		<div class="box">
			<div class="kkk">
				<input class="btn" type="button" value="点击淡入弹窗" />
			
			</div>
			
			
		</div>
	</body>
</html>


滑动弹窗效果： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{padding: 0;margin: 0;}
			.box{width: 100%;height: 100%;}
			.main{width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);display: none;position: fixed;z-index: 1;}
			.mainbox{width: 800px;height: 100%;margin: 0 auto;background-color: rgba(255,255,255,0.8);padding: 20px;display: none;}
			.kkk{width: 100%;height: 1200px;background-color: red;}
			.close{color: red;cursor: pointer;}
		</style>
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(function(){
				$(".btn").click(function(){
					$(".main").fadeIn();
					$(".mainbox").delay(500).slideDown();
				});
				$(".close").click(function(){
					$(".main").fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<div class="main">
				<div class="mainbox">
					<div class="close">点击关闭</div>
				</div>
			</div>
		<div class="box">
			<div class="kkk">
				<input class="btn" type="button" value="点击淡入弹窗" />
			
			</div>
			
			
		</div>
	</body>
</html>



包子源
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery点击弹出窗口特效
06-10
jquery实现点击按钮后弹出窗口，新窗口支持图文并茂排列方式，也支持调用iframe
jQuery实现的两种简单弹窗效果示例
10-18
主要介绍了jQuery实现的两种简单弹窗效果,结合实例形式分析了jQuery实现淡入弹窗及滑动弹窗的相关操作技巧,需要的朋友可以参考下
jQuery实现弹窗效果
托尼stark的博客
05-19 2万+
点击弹窗按钮，弹出如下界面，点击取消和右上角的X则取消： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
JQuery实现删除操作确认弹窗功能
最新发布
m0_57632178的博客
03-09 392
1.弹窗功能可以使jquery中的confirm()函数，基本语法如下。2.1分析如下图所示。2.根据层次关系来获取name值。
jquery实现弹窗效果（超级简单）
xin_sleep的博客
10-13 2574
css代码 h1,p,h2{ margin: 0; padding: 0; } .modal_info{ display: flex; visibility: hidden; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 200px; height: auto; position: fixed; marg
JQuery实现的弹窗效果
weixin_33892359的博客
06-19 320
这是笔者实际项目中的一个需求，我们先来看看特效。 页面加载时弹出窗口，点击关闭按钮，窗口消失并呈现动画效果。 实现代码如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmln...
jQuery实现简单弹出框
zhengvipin的博客
03-05 7301
jQuery实现Popover效果
简单实现jQuery弹窗效果
01-19
本文实例为大家分享了jQuery弹窗效果展示的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>弹窗</title> [removed]...
jQuery实现简单弹窗遮罩效果
10-20
本文主要介绍了jquery实现简单弹窗遮罩效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
jquery实现弹窗功能（窗口居中显示）
10-18
本文主要介绍了jquery实现弹窗功能且弹出确认框始终位于窗口中间位置的实例，具有很好的参考价值，下面跟着小编一起来看下吧
jquery实现弹窗（系统提示框）效果
12-13
本文实例为大家分享了jquery实现系统提示框的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> [removed][removed] <title>...
jquery ui dialog实现弹窗特效的思路及代码
11-30
今天我们用jquery ui dialog来做一个弹窗特效。我们先看下效果截图： 　　我们可以看到，点击的时候，弹窗出现，而且这个弹窗是居中的，还是可以拖动的。。。实现这一切，只要以下代码： 　　我们可以看到，我对pop这个div，实现的方式是让它不要autoopen，点击的时候，我只要一句dialog,open就搞定了，借助于jquery ui，我们做弹窗就是这么简单。。。当然了，大家可以看到，我还有一个插入数据的功能，这个功能，我采用了jquery 的appendto： 　　我先通过变量获取值，接着建了一个html标签，然后appendTo到table里，这样，大家就可以看到数据的插入了，
jQuery模态弹窗插件(jquery-confirm)
MingDaw的专栏
10-31 1万+
jquery-confirm组件包含两个资源文件，分别为：样式文件jquery-confirm.min.css和脚本文件jquery-confirm.min.js。jquery-confirm官网地址：https://craftpip.github.io/jquery-confirm/注：jquery-confirm依赖于jQuery，如果你还需要响应式布局，则还依赖Bootstrap。如果你的前端项目中还在使用jQuery，那么jquery-confirm是你模态弹窗的完美选择。
JQ制作简易弹窗效果
weixin_33767813的博客
02-22 406
为什么要做这个，主要是任务需要，其次为了不引用过多的插件。1、先定义一个div，并把它脱离文档流，这样他就有机会漂浮在页面上2、在定义好的div里写弹窗的内容3、调整样式，设置定义好的div的高度，满屏（宽度比较容易，高度就需要定义个函数来设置）4、最后将div的display设置为none，事件触发时再将其展示。 <!DOCTYPE html> <html lang="en"&...
怎么用jQuery做弹出窗口
nk90875的博客
01-28 2645
用jQuery做弹出窗口的方法：首先设置button标签的id为mybutton；然后通过id获得button对象，给它绑定click点击事件；最后当按钮被点击时，使用【confirm()】方法弹出对话框。 本教程操作环境：windows7系统、jquery3.2.1版本，该方法适用于所有品牌电脑。 推荐：jquery视频教程 用jQuery做弹出窗口的方法： 1、新建一个html文件，命名为test.html，用于讲解怎样使用jquery弹出对话框。 2、在test.html文件内，使用button标签创
jQuery获取窗口大小及窗口大小改变时执行代码
热门推荐
包子源的博客
04-22 2万+
$(window).height(); //浏览器时下窗口可视区域高度 $(document).height(); //浏览器时下窗口文档的高度 $(document.body).height();//浏览器时下窗口文档body的高度 $(document.body).outerHeight(true);//浏览器时下窗口文档body的总高度 包括border padding margin
利用sort方法对json数据排序
包子源的博客
08-09 2万+
如何对后台返回过来的json数据按照数据中的某一项进行排序呢。 首先看一下排序前的json数据： { "result":[ { "cid":1, "name":"aaa", "price":1000 },{ "cid":2, "name
js实现左右滑动的导航菜单，仿今日头条顶部菜单
包子源的博客
11-20 1万+
menu body{padding: 0;margin: 0} .swiper-slide{width: auto!important;} .topmenu{height: 35px;background-color: white;border-bottom: 1px solid #CCCCCC;padding: 0 1
jquery实现动画效果实例
05-30
以下是一个使用 jQuery 实现动画效果的例子： HTML 代码： ```html <div id="box"></div> 点击 ``` CSS 代码： ```css #box { width: 100px; height: 100px; background-color: red; position: relative; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值