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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
python发送HTTP请求的方法小结
2015/07/08 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python openpyxl使用方法详解
2019/07/18 Python
深入了解Python在HDA中的应用
2019/09/05 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
学生会主席就职演讲稿
2014/01/14 职场文书
交通安全寄语大全
2014/04/08 职场文书
会计实训报告范文
2014/11/04 职场文书
于丹论语心得观后感
2015/06/15 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python