弹出窗口(jquery应用1)

最新推荐文章于 2020-07-10 01:07:50 发布

kandy_java

最新推荐文章于 2020-07-10 01:07:50 发布

阅读量602

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/u010866487/article/details/9000902

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

A:编写页面：jqueryWIn.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"  type="text/css" href="css/win.css">
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript" src="js/jqueryWin.js"></script>
</head>
<body>
<a href="#" οnclick="showWin()">显示浮动框口</a>
<div id="win">
   <div id="title">标题<span id="close" οnclick="hideWin()">X</span></div>
   <div id="content">这是一个弹出窗口</div>
</div>
</body>
</html>

B:创建css文件：win.css

/*margin边界 border边框 padding 填充  content内容*/
#win{
   /*设置窗口的边框*/
   border:1px red solid; 
 /* 固定窗口的高度和宽度*/
 width:300px;
 height:200px;
 /*通过绝对定位的方式控制窗口的显示位置*/
 position:absolute;
 top:100px;
 left:350px;
 /*默认窗口是隐藏的*/
 display:none;
}
/*设置标题的样式*/
#title{
   /*背景色*/
   background-color:blue;
   /*设置文字的颜色*/
   color:red;
   /*设置标题栏的内边距*/
   padding-left:3px;
}
/*对主窗口设置样式*/
#content{
  padding-left:10px;
  padding-top:20px;
}
/*控制关闭按钮的位置*/
#close{
 margin-left: 250px;
 /*鼠标进入时，显示小手状，告知用户可以点击操作*/
    cursor:pointer;
}

C:编写js:jqueryWin.js

function showWin()
{
 //找到该div节点对象
  var winNode=$("#win");
  //该div所对应的窗口显示出来

  //方法1：修改css：display=block
  //winNode.css("display","block");
  //方法2:show()
 // winNode.show("slow");
  //方法3：淡入效果.fadeIn()
  winNode.fadeIn(2500);
}

function hideWin()
{
 //找到该div节点对象
  var winNode=$("#win");
  //该div所对应的窗口显示出来
  //方法1：修改css：display=none
  //winNode.css("display","none");
  //方法2:hide()方法
   winNode.hide("slow");
  //方法3：淡出效果 fadeOut()
  //winNode.fadeOut(2000);
}