jquery 弹框返回上一个页面 jquery弹出

转载

level 2023-09-11 22:47:51

文章标签 jquery 弹框返回上一个页面 jquery div myeclipse stylesheet 文章分类 jQuery 前端开发

了解Ajax的人都知道，Ajax中有许多专门开发Javascript的框架，比如近年来非常流行的prototype、Dojo、Ext、script.aculo.us、Moo Tools 、Jquery等等。
　Jquery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

　　JQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。因此我推荐大家使用Jquery，使用简单，而且写的代码不用很多就可以实现非常强大的功能。下面提供的源代码是我用Jquery实现的一个——点击窗口实现窗口“淡入淡出”的效果。

首先提供myeclipse中的项目框架图：

说明：我使用的Jquery是Jquery 1.2.6，相关的Jquery.js文件大家可以从网上下载。

win.css代码如下： 
@CHARSET "UTF-8"; 
/*id选择器*/ 
#win{ 

  /*希望窗口有框*/ 
  border: 1px red solid; 
  /*希望窗口宽度和高度固定，不要太大*/ 

  width: 200; 
  height: 150; 
   
  /*希望控制窗口的位置*/ 
  position: absolute; 
  top: 100px; 
  left:200px; 
   
  /*希望开始时窗口不可见*/ 
  display: none; 
} 

/*控制标题栏的样式*/ 
#title{ 
   /*控制标题栏的背景颜色*/ 
   background-color: silver; 
   /*控制字体的颜色*/ 
   color: red; 
   /*控制标题栏高度*/ 
   height: 25px; 
} 

/*控制文本内容的样式*/ 
#content{ 
   padding-left: 10px; 
   padding-top: 10px; 
} 

/*控制关闭按钮的位置*/ 
#close{ 
/*控制关闭按钮的显示位置*/ 
margin-left: 104px; 
   /*当用户进入后可以现在小手图标，提示用户可以操作*/ 
   cursor: pointer; 
} 


jquery-window.js代码如下： 
//show the changing window 
function showwin(){ 

//alert("good!!!"); 
//1.找到窗口对应的div节点 
var winNode = $("#win"); 

//2.让div对应的窗口显示出来 

//方法1：通过修改CSS中的display属性值为block 
//winNode.css("display","block"); 

//方法2：利用Jquery的show()方法,慢慢出现 
//winNode.show("slow"); 

//方法3：利用Jquery的fadeIn()方法，实现淡入 
winNode.fadeIn("slow"); 
} 

//将显示的窗口隐藏 
function hide(){ 
   //1.获取窗口对应的节点 
var winNode = $("#win"); 

   //2.隐藏窗口 

   //方法1：修改CSS 
// winNode.css("display","none"); 

   //方法2：利用Jquery的hide()方法 
// winNode.hide("slow"); 

   //方法3：利用Jquery的fadeOut()方法，实现淡出 
winNode.fadeOut("slow"); 
} 


jquery-window.html的代码如下： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>jquery实例1：浮动窗口的实现</title> 

    <meta http-equiv="keywords" cnotallow="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" cnotallow="this is my page"> 
    <meta http-equiv="content-type" cnotallow="text/html; charset=UTF-8"> 
     
    <script type="text/javascript" src="js/jquery-window.js"></script> 
    <script type="text/javascript" src="js/Jquery.js"></script> 
     
    <link rel="stylesheet" type="text/css" href="css/win.css"> 
  </head> 
   
  <body> 
    <h1>jquery实例1：浮动窗口的实现</h1><hr> 
    <a οnclick="showwin()" href="#">显示浮动窗口</a> 
     
    <!-- 如何在页面中弹出一个窗口，利用div --> 
    <!-- 下面这个div怎么看都不是一个窗口，所以需要利用css来改变这个div的样式 --> 
     
    <!-- 出现标题栏和内容部分 --> 
    <div id="win"> 
       <div id="title">我是标题栏<span id="close" οnclick="hide()">X</span></div> 
       <div id="content">欢迎查看弹出窗口效果的演示，呵呵呵呵呵呵呵！！！</div> 
    </div> 
     
  </body> 
</html>

分别用firefox浏览器和IE7.0浏览器的测试结果如下：

firefox下面的截图效果是：