javascript弹出窗口实现代码

2024-05-06 16:25:00

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了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>