JavaScript 팝업창 구현 code_javascript 기술
- WBOY원래의
- 2016-05-16 15:32:521212검색
많은 웹페이지에서는 팝업창을 구현했는데, 이는 특히 사용 측면에서 사용자 친화적입니다. 이 글에서는 자바스크립트를 사용하여 팝업창 효과를 구현하는 방법을 소개합니다.
<!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>
렌더링:
위 내용은 모두에게 공유된 자바스크립트 팝업창 구현 코드입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.