javascript弹出窗口实现代码


Posted in Javascript onNovember 12, 2015

很多网页都实现了弹出窗口,使用方面,特别的人性化,本文就大家介绍javascript实现弹出窗口特效,具体代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>弹出窗口</title>
<script src="js/jquery-1.11.1.js"></script>
<style>
*{
 margin: 0;
 padding: 0;
}
div{
 margin: 0 auto;
 /*border: 1px solid red;*/
}
.overBg{
 width: 100%;
 height: 100%;
 background: gray;
 opacity: 0.5;
 filter: alpha(opacity=50);
 position: fixed;
 top:0;
 z-index: 300;
}
.tc-con{
 width: 200px;
 height: 200px;
 padding: 30px;
 background: blanchedalmond;
 position: fixed;
 top: 0;
 z-index: 1000;
}
</style>
<script>
 $(function(){
  $('.tc').hide();
  $('.btn').click(function(){
   $('.tc').show();
  })
  $('.tc').click(function(){
   $(this).hide();
  })
 })
</script>
</head>
<body>
<div class="btn">点击出现</div>
<div class="tc">
 <div class="overBg"></div>
 <div class="tc-con" id="tc-con">22</div>
 <script>
  var a=document.getElementById('tc-con');
  a.style.left=(document.body.clientWidth/2- a.clientWidth/2)+'px';
  a.style.top=(document.documentElement.clientHeight/2- a.clientHeight/2)+'px';
 </script>
</div>
<div style="height:2000px">22</div>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>弹出窗口</title>
<script src="js/jquery-1.11.1.js"></script>
<style>
*{
 margin: 0;
 padding: 0;
}
div{
 margin: 0 auto;
 /*border: 1px solid red;*/
}
.overBg{
 width: 100%;
 height: 100%;
 background: gray;
 opacity: 0.5;
 filter: alpha(opacity=50);
 position: fixed;
 top:0;
 z-index: 300;
}
.tc-con{
 width: 200px;
 height: 200px;
 padding: 30px;
 background: blanchedalmond;
 position: fixed;
 top: 0;
 z-index: 1000;
}
</style>
<script>
 $(function(){
  $('.tc').hide();
  $('.btn').click(function(){
   $('.tc').show();
  })
  $('.tc').click(function(){
   $(this).hide();
  })
 })
</script>
</head>
<body>
<div class="btn">点击出现</div>
<div class="tc">
 <div class="overBg"></div>
 <div class="tc-con" id="tc-con">22</div>
 <script>
  var a=document.getElementById('tc-con');
  a.style.left=(document.body.clientWidth/2- a.clientWidth/2)+'px';
  a.style.top=(document.documentElement.clientHeight/2- a.clientHeight/2)+'px';
 </script>
</div>
<div style="height:2000px">22</div>
</body>
</html>

效果图:

javascript弹出窗口实现代码

以上就是为大家分享的javascript弹出窗口实现代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
javascript实现tab切换特效
Nov 12 #Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 #Javascript
JavaScript中获取Radio被选中的值
Nov 11 #Javascript
javascript图片滑动效果实现
Jan 28 #Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 #Javascript
九种原生js动画效果
Nov 11 #Javascript
js文字横向滚动特效
Nov 11 #Javascript
You might like
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
利用python编写一个图片主色转换的脚本
2017/12/07 Python
python3.x上post发送json数据
2018/03/04 Python
Python输入二维数组方法
2018/04/13 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
pygame实现五子棋游戏
2019/10/29 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
市场营销求职信范文
2014/02/21 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
说明书格式及范文
2014/05/07 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
宣传委员竞选稿
2015/11/19 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js