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调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
vue如何搭建多页面多系统应用
Jun 17 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
vue实现前端列表多条件筛选
Oct 26 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
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
Angular2库初探
2017/03/01 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
Vue实现验证码功能
2019/12/03 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
优秀德育工作者事迹材料
2014/05/07 职场文书
2014年妇联工作总结
2014/11/21 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
golang中的并发和并行
2021/05/08 Golang
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA