jquery实现弹框效果

最新推荐文章于 2023-03-24 20:05:31 发布

duoduo220

最新推荐文章于 2023-03-24 20:05:31 发布

阅读量2.5k

点赞数

分类专栏： jquery 文章标签： jquery function class javascript button 工作

本文链接：https://blog.csdn.net/wo1354691371/article/details/7400450

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

window.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现弹框效果</title>
</head>
<link type="text/css" href="window.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="window.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
//居中效果
$("#btn_center").click(function (){
    $(window).scroll(function (){

    popCenterwindow();
    });

   });
//弹框左下角效果
     $("#btn_left").click(function (){
   $(window).scroll(function (){

    popLeftBottomWindow();
    });
   });
   //弹框左下角效果

     $("#btn_right").click(function (){
   $(window).scroll(function (){

    popRightBottomWindow();
    });

   });
});

</script>
<body>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<input type="button" value="弹出居中框" id="btn_center">
<input type="button" value="弹出居左下角框" id="btn_left">
<input type="button" value="弹出居右下角框" id="btn_right">
<div id="center" class="tan_window">
<div class="title"><img src="x.jpg">简单工作室欢迎你-居中</div>
<div class="content">简单工作任由你自主想象开发，独立、自由的空间</div>
</div>
<div id="left" class="tan_window">
<div class="title"><img src="x.jpg">简单工作室欢迎你-居左</div>
<div class="content">简单工作任由你自主想象开发，独立、自由的空间</div>
</div>
<div id="right" class="tan_window">
<div class="title"><img src="x.jpg">简单工作室欢迎你-居右</div>
<div class="content">简单工作任由你自主想象开发，独立、自由的空间</div>
</div>
</body>
</html>
2、window.js文件

//定义浏览器的高度
var windowHeight;
//定义浏览器的宽度
var windowWidth;
//定义弹框的高度
var popHeight;
//定义弹框的宽度
var popWidth;
//获取滚动条的高度
var scrollTop;
//获取滚动条的宽度
var scrollLeft;
//延迟时间
var timeout;
function init(){
windowHeight=$(window).height();
windowWidth=$(window).width();
popHeight=$(".tan_window").height();
popWidth=$(".tan_window").width();
scrollTop=$(window).scrollTop();
scrollLeft=$(window).scrollLeft();

};
//定义关闭窗口的函数

3、window.css文件

.tan_window{

background-color:#0F9;
width:230px;
padding:2px;
margin:5px;
display:none;
position:absolute;
}
.title{
padding:2px;
font-size:14px;
color:#C09;}
.content{
   width:220px;
   height:150px;
   background-color:#FFF;
   font-size:14px;
   padding:2px;
   overflow:auto;

}
.title img{
   float:right;
   cursor:pointer;}

duoduo220

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现弹框效果

window.html文件http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">jquery实现弹框效果 $(document).ready(function (){ //居中效果 $("#btn_center").clic
复制链接

扫一扫

专栏目录