javascript弹出窗口实现代码

前端技术 2023/09/03 JavaScript

很多网页都实现了弹出窗口，使用方面，特别的人性化，本文就大家介绍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弹出窗口实现代码，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/6568

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案