创建弹窗
时间:2022-05-06
本文章向大家介绍创建弹窗,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/animate.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<style>
html,body{
margin: 0px;
min-height: 100%;
width: 100%;
}
.warp{
width: 500px;
height: 300px;
border-radius: 10px;
background: brown;
margin: 0px auto;
margin-top:30px;
box-shadow: 0px 0px 40px 0px white;
}
.mask{
position: absolute;
width: 100%;
min-height: 100%;
background:rgba(0,0,0,0.5);
top:0px;
}
#show{
position: absolute;
}
#content{
height: 1400px;
width: 300px;
margin: 0px auto;
}
</style>
</head>
<body>
<input type="button" value="创建" id="show" />
<div id="content"></div>
</html>
<script>
$(function(){
$('#show').click(function(){
var height=$("body").height();
$(document.body).append("<div class='mask'><input type='button' value='关闭' id='close' /><div class='warp'></div></div>");
$('.mask').css("height", height);
$('.mask').addClass('animated zoomInDown');
$('.warp').addClass('animated zoomInDown');
$('#close').click(function(){//关闭按钮
$('.mask').addClass('animated zoomOutUp');//出场动画
$('.warp').addClass('animated zoomOutUp');
$(function(){setTimeout(function(){//结束之后删除div
$(".mask").remove();
},2000);})
})
})
//抖动(shake)
//闪烁(flash)
// 弹跳(bounce)
// 翻转(flip)
// 旋转(rotateIn/rotateOut)
// 淡入淡出(fadeIn/fadeOut)
// 缩放(zoom)
// animated 类似于全局变量,它定义了动画的持续时间;bounce 是动画具体的动画效果的名称,你可以选择任意的效果。
//如果动画是无限播放的,可以添加 class infinite。
//有些动画效果最后会让元素不可见,比如淡出、向左滑动等等,可能你又需要将 class 删除,比如:
//$(function(){
// $('#dowebok').addClass('animated bounce');
// setTimeout(function(){
// $('#dowebok').removeClass('bounce');
// }, 1000);
//});
});
</script>
- 关于 JS 拖拽功能的冲突问题及解决方法
- 使用 SVG 和 JS 创建一个由星形变心形的动画
- 如何使用 Bootstrap 搭建更合理的 HTML 结构
- Java遍历Map对象的四种方式
- java 线程public void run()中值如何返回
- Jackson与spring框架整合的坑
- spring shiro整合时自动注入的问题
- mybatis获取update的id
- 点击!AWD攻防解题技巧在此!
- Docker 基础技术之 Linux namespace 详解
- Centos6下使用yum安装MariaDB
- Linux下部署Samba服务环境的操作记录
- SCP和Rsync远程拷贝的几个技巧
- Linux服务器更换主板后,网卡识别失败的处理方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法