jquery implements pop-up layer effect code that can automatically determine the position

Home

Web Front-end

JS Tutorial

jquery implements pop-up layer effect code that can automatically determine the position_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:37 PM

jqueryPop-up layer

The example in this article describes the jquery implementation of pop-up layer effect code that can automatically determine the position. Share it with everyone for your reference. The details are as follows:

This is a smart pop-up layer effect implemented by jquery. The position can be adaptive. When the layer is displayed on the right, it will automatically move to the left. Please press F5 to refresh when running for the first time. The effect can only be seen after loading the remote jQuery. Click the left mouse button and the pop-up layer will appear. When you click on the far right, the layer will automatically move to the left.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/

The specific code is as follows:

<!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="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"> </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>
</body>
</html>

I hope this article will be helpful to everyone’s jQuery programming.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn