<!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>

<script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>

<style>

*{ margin:0; padding:0}

body{ margin:0; padding:0; font-size:12px}

ul,li{ list-style:none}

ul{position:relative;top:-3px; left:-3px;border:1px solid #ccc; background:#fff;}

li{height:23px;line-height:23px;cursor:default; padding:0 0 0 10px}

li.current{background:#eee}

.wrap{ width:158px; background:#eee; position:absolute;}

</style>

<script type="text/javascript">

$(function(){

$(".wrap").hide();

var objW=$(".wrap").width();

var objH=$(".wrap").height();

$(document).mousedown(function(e){

var selfX=objW+e.pageX;

var selfY=objH+e.pageY

var bodyW=document.documentElement.clientWidth+document.documentElement.scrollLeft;

var bodyH=document.documentElement.clientHeight+document.documentElement.scrollTop;

if(selfX>bodyW && selfY>bodyH){

$(".wrap").css({top:(bodyH-objH),left:(bodyW-objW)}).show();

}else if(selfY>bodyH){

$(".wrap").css({top:(bodyH-objH),left:e.pageX}).show();

}else if(selfX>bodyW){

$(".wrap").css({top:e.pageY,left:(bodyW-objW)}).show();

}else{

$(".wrap").css({top:e.pageY,left:e.pageX}).show();

}

})

$("li").hover(function(){

$(this).addClass("current");

},function(){

$(this).removeClass("current");

}).click(function(){

alert($(this).text())

$(this).parent().parent().hide();

})

})

</script>

</head>

<body>

<div style="height:800px;width:900px">&nbsp;</div>

<div style="position:absolute;top:300px;left:300px"><span style="color:#f00;font-size:28px">请按F5刷新，才干看到效果。</span><br>点击鼠标左键，弹出层，<br>在最右边点击时





层自己主动往左移</div>

<div class="wrap">

<ul onmousedown="event.cancelBubble = true">

<li>连江</li>

<li>宁德</li>

<li>福州</li>

<li>厦门</li>

<li>北京</li>

</ul>

</div>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

jquery智能弹出层，自己主动推断位置的更多相关文章

  1. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  2. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  3. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  4. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  5. jquery 简单弹出层

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; pos ...

  6. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  7. jQuery.reveal弹出层使用

    最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...

  8. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

  9. 写了一个jquery的 弹出层插件。

    下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件  参数(option): widt ...

随机推荐

  1. mysql内连接、左连接、右连接

    内连接(INNER JOIN)(典型的连接运算,使用像   =   或   <>   之类的比较运算符).包括相等连接和自然连接. 内连接使用比较运算符根据每个表共有的列的值匹配两个表中的 ...

  2. linux 查看有哪些service

    一.利用进程来查看命令里 ps -aux | grep xxx 是查看某个进程或者服务是否存在.二.利用chkconfig配置工具chkconfig --list 可以列出所有的服务在各个runlev ...

  3. 全国大学API接口分享

    1.获取省份列表: http://119.29.166.254:9090/api/provinces 返回的是省份列表,其中id很重要. 2.通过省份id查询省份城市: http://119.29.1 ...

  4. vue 兼容IE报错解决方案

    IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...

  5. 解决UnicodeDecodeError: 'ascii' codec can't decode byte 0xcf in position 7: ordinal not in range(128)

    在Windows下同时装了Python2和Python3,但是在使用命令给pip更新的时候,出现了以下错误: 解决办法:修改mimetypes.py文件,路径位于python的安装路径下的Lib\mi ...

  6. 证书（Certificate）与描述文件（Provisioning Profiles）

    在使用脚本xcodebuild自动打包的时候,会用到签名证书和描述文件,我在编译的时候搞了好长时间才搞明白,下面介绍如何得到正确配置. 证书:证书是用来给应用程序签名的,只有经过签名的应用程序才能保证 ...

  7. CentOS 7命令行安装图形界面（GNOME、KDE等）

    CentOS 7 默认是没有图形化界面的,但我们很多人在习惯了 Windows 的图形化界面之后,总是希望有一个图形化界面从而方便我们使用,这里介绍一下 CentOS7安装图形化桌面系统的方法. 一. ...

  8. prometheus如何使用blackbox-exporter来获取k8s的网络性能

    如果学会了如何抓取app的metrics,则blackbox-exporter抓取网络性能套路是相同的. 一,在blackbox-exporter的blackbox.yml里配置好抓取模块,常见的是h ...

  9. [转] offsetParent 到底是哪一个？

    正文 不同情况 没有已定位的父节点,且自身position:relative的DIV元素的offsetParent为BODY 没有已定位的父节点,且自身position: absolute的DIV元素 ...

  10. vuejs、eggjs、mqtt

    vuejs.eggjs.mqtt全栈式开发设备管理系统 vuejs.eggjs.mqtt全栈式开发简单设备管理系统 业余时间用eggjs.vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据 ...