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>