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 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
javascript自定义加载loading效果
2020/09/15 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python中的数学运算操作符使用进阶
2016/06/20 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
python实现大学人员管理系统
2019/10/25 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
2014年教师节讲话稿5篇
2014/09/10 职场文书
查摆问题整改措施
2014/10/24 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
小学体育组工作总结
2015/08/13 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis
MySQL GTID复制的具体使用
2022/05/20 MySQL