编程 Javascript

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弹出窗口实现代码

- Author -

浮世微凉

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript isArray 数组类型检测函数

Oct 08 Javascript

jquery实现奇偶行赋值不同css值

Feb 17 Javascript

jquery实现简单的拖拽效果实例兼容所有主流浏览器

Jun 21 Javascript

可兼容IE的获取及设置cookie的jquery.cookie函数方法

Sep 02 Javascript

关闭浏览器时提示onbeforeunload事件

Dec 25 Javascript

js实现身份证号码验证的简单实例

Feb 19 Javascript

js鼠标点击图片实现随机变换图片的方法

Feb 16 Javascript

jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

Aug 22 Javascript

JS经典正则表达式笔试题汇总

Dec 15 Javascript

Bootstrap 手风琴菜单的实现代码

Jan 20 Javascript

JS中静态页面实现微信分享功能

Feb 06 Javascript

vue中使用 pako.js 解密 gzip加密字符串的方法

Jun 10 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