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 相关文章推荐
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
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
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
JavaScript confirm选择判断
2008/10/18 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python任务调度实例分析
2015/05/19 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python实现图片上添加图片
2019/11/26 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
主管会计岗位责任制
2014/02/10 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
结婚老公保证书
2015/02/26 职场文书
素质拓展训练感想
2015/08/07 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
java设计模式--原型模式详解
2021/07/21 Java/Android
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技