`

jQuery弹出Div窗口居中显示、滚动跟随、关闭按钮以及几秒后自动消失

 
阅读更多
 <DIV id="closeLayer"  onClick="closeMe()"><IMG src="jiuye/close.gif" width="15" height="13"></DIV>  
  <div id ="jiuye"><img src="jiuye/jiuye1.jpg" id="jiuyeImage" onclick="javascript:location='http://www.qk12333.com'" style="cursor:hand"/></div>  
  <style type="text/css">  
  #jiuye{  
      position:absolute;  
      left:16px;  
      top:129px;  
      width:600px;  
      height:540px;  
      z-index:1;  
        
  }  
  #closeLayer{  
      position:absolute;      
      left:580px;     
      top:143px;      
      width:24px;     
      height:19px;  
      z-index:2;  
  }  
  </style>  
<script src="jiuye/jquery-1.8.0.js" type="text/javascript"></script>  
<script type="text/javascript">  
    
function closeMe(){  
    document.getElementById("closeLayer").style.display="none";  
    document.getElementById("jiuye").style.display="none";  
    $(window).unbind();  
}  
  // 居中  
function center() {  
    var obj=$("#jiuye");  
    var closeObj=$("#closeLayer");  
    var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高  
    var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度  
    var objLeft = (screenWidth - obj.width())/2 ;  
    var objTop = (screenHeight - obj.height())/2 + scrolltop;  
    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});  
      
    var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ;  
    var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12;  
    closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'});  
    //浏览器窗口大小改变时  
    $(window).resize(function() {  
    screenWidth = $(window).width();  
    screenHeight = $(window).height();  
    scrolltop = $(document).scrollTop();  
    objLeft = (screenWidth - obj.width())/2 ;  
    objTop = (screenHeight - obj.height())/2 + scrolltop;  
    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});  
    var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ;  
    var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12;  
    closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'});  
    });  
    //浏览器有滚动条时的操作、  
    $(window).scroll(function() {  
    screenWidth = $(window).width();  
    screenHeight = $(window).height();  
    scrolltop = $(document).scrollTop();  
    objLeft = (screenWidth - obj.width())/2 ;  
    objTop = (screenHeight - obj.height())/2 + scrolltop;  
    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});  
    var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ;  
    var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12;  
    closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'});  
    });  
}   
center();  
$('#closeLayer').show(300).delay(3000).fadeOut("slow");  
$('#jiuye').show(300).delay(3000).fadeOut("slow",function(){     
   //隐藏时把元素删除     
  $(window).unbind();  
});     
</script>  

 

分享到:
评论

相关推荐

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    **jQuery弹出div层窗口** 在网页开发中,jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用...

    jquery 弹出 div 模式窗口

    `jquery.magnific-popup.js`是magnific popup插件的核心脚本,它提供了一种优雅的方式来创建各种类型的弹出窗口,包括图像、视频、iframe、纯文本以及自定义的Div模态窗口。这个插件设计得既美观又可定制,可以轻松...

    Jquery弹出DIV

    "Jquery弹出DIV"是指利用jQuery来实现一个可交互的模态对话框(通常称为弹出窗口或浮层),在网页上显示额外的信息或者进行一些用户交互。模态对话框通常是网页中的一个浮动元素,可以覆盖页面的其他部分,直到用户...

    用jQuery实现弹出窗口弹出div层

    在页面加载后或者点击页面的某个链接时弹出一个div层,同时页面的其他地方会变灰

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要&lt;div id="ok"&gt;这里是弹出浮动遮罩层&lt;/...

    JQuery完美弹出div窗口/ 弹出窗口/ 弹出层

    完美弹出div窗口 修改版 完美遮罩 修复JQuery对浏览器判断的bug 支持IE6,7,8,FF jspanduanIE.html test无边框iframe完美遮罩.html demo.html 多种测试页面

    jQuery弹出信息窗口

    本文将详细讲解如何利用jQuery实现弹出信息窗口,以及相关的技术要点。 首先,我们要理解jQuery弹出窗口的核心原理。这通常通过创建一个新的div层,将其设置为不显示,然后在需要时通过CSS和JavaScript将其动态显示...

    JQUERY弹出模式DIV

    "JQUERY弹出模式DIV"是指使用jQuery来实现一种常见用户界面设计——模态对话框或者称为弹出窗口。这种功能在网页中很常见,用于显示警告、确认信息或者展示详细内容等。 模态对话框(Modal Dialog)是一种阻止用户...

    jquery 弹出居中登录窗口,静止滚动 背景变灰色

    在这个场景中,jQuery用于控制弹出登录窗口的显示和隐藏,以及处理窗口的居中和滚动效果。 1. **弹出窗口的显示与隐藏**:在jQuery中,可以使用`.show()`和`.hide()`方法来控制元素的可见性。例如,当用户触发某个...

    JQUery弹出div层窗口,附带jquery的js文件,可以直接运行

    在这个名为“JQuery弹出div层窗口”的项目中,开发者提供了一个使用jQuery实现的弹出对话框功能,这个功能允许用户在不离开当前页面的情况下显示额外的信息或者进行交互。 首先,我们来理解`index.html`文件。这是...

    jquery弹出div

    在这个“jquery弹出div”的主题中,我们将深入探讨如何利用jQuery来实现一个div元素的弹出效果,这通常用于创建对话框、提示框或者模态窗口。 首先,`div`在HTML中是一个通用的容器元素,用于组织页面内容。我们...

    jquery 弹出模式窗口

    `closeOnCancel`和`closeOnEscape`分别表示取消按钮和Esc键是否能关闭窗口,`backgroundOpacity`设置背景层的透明度,`show`和`hide`指定了弹出和关闭时的动画效果。 ### 5. 自定义内容和布局 jQuery-Impromptu...

    jquery实现弹出窗口

    3. **jQuery 事件**:使用 jQuery 选择器和事件监听来控制弹出窗口的显示和关闭。例如: ```javascript $(document).ready(function() { var modal = $("#myModal"); // 当点击关闭按钮时关闭弹出窗口 $("....

    jquery弹出div+异步加载数据

    本项目"jquery弹出div+异步加载数据"旨在实现一个功能丰富的用户界面,其中包含一个可拖动的弹出div,并能通过异步方式从服务器获取并显示数据。下面我们将详细探讨这个项目中的关键知识点。 首先,**jQuery弹出div...

    JQUERY 弹出窗口

    综上所述,"JQUERY 弹出窗口"是一个关于利用jQuery创建和管理弹出对话框或弹出层的实践主题,涉及到的基本知识点包括jQuery的选择器、DOM操作、显示/隐藏方法以及可能的CSS样式和动画效果。在实际开发中,理解并熟练...

    jquery弹出窗口

    当我们谈论"jquery弹出窗口"时,通常指的是使用jQuery实现的对话框或模态窗口,这些窗口可以在用户与网页交互时提供额外的信息或者功能。 在网页设计中,弹出窗口可以是警告消息、确认对话框,或者如登录窗口这样的...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    6. **自动居中**:在弹出层显示时,可以通过获取窗口大小和弹出层大小,动态计算并设置`left`和`top`属性,使弹出层始终位于页面中间。 7. **关闭机制**:通常还会提供一个关闭按钮或点击其他区域关闭弹出层的功能...

    jQuery超炫淡入淡出效果DIV渐变居中弹出框插件

    综上所述,"jQuery超炫淡入淡出效果DIV渐变居中弹出框插件"结合了jQuery的动画效果、CSS3的渐变和定位技术以及自定义的弹出框逻辑,为用户提供了一种吸引人的交互体验。通过下载提供的压缩包文件,你可以获取到完整...

    jquery div 弹出框

    "jQuery div 弹出框"是指使用jQuery技术来创建一个可自定义的、浮动于页面上的对话框或提示框,通常称为模态窗口。这种弹出框通常用于显示警告、确认信息、详细内容或表单等。以下将详细讲解如何实现jQuery div弹出...

    jquery弹出代码、div弹出代码

    在jQuery中,可以利用div元素创建自定义的弹出窗口。例如,你可以创建一个隐藏的div,当点击按钮或执行其他操作时,通过改变div的CSS属性(如display)来使其可见,从而达到弹出的效果。这种弹出可以是模态的(阻止...

Global site tag (gtag.js) - Google Analytics