在相对位置显示div [英] displaying div on relative postion

问题描述

你好那里

我正在寻找一种方法来显示链接按钮上的div点击并且div应该在链接按钮旁边显示

什么我得到的是应用于div的CSS是

。  Bag   div 。 MultibuyModal  
 {
  / *   border：8px solid＃a1a1a1; * /  
  background-color  ：  #FFFFFF;  
  width  ：  340px;  
  padding-left  ：  30px;  
  padding-top  ：  5px;  
  height  ：  150px;  
   -  webkit-border-radius  ：  10px;  
   -  moz-border-radius  ：  10px;  
  border-radius  ：  10px;  
  overflow-y   ： 滚动;  
  position   ： 已修复;  
  top   ：  75％;  
  left  ：  50％;  
  margin-top  ：  -9em;   / *  设为负数n高度的1/2是* /  
  margin-left  ： < span class =code-keyword> -15em;   / *  设置为负数1/2您的宽度* /  
  border  ：  10px solid rgb（100,100,100）;   / *  默认颜色* /  
  border  ：  10px solid rgba（ 0,0,0,0.1）;   / *   rgba for transparency * /  
} 

但上述css的问题是潜水总是在固定位置，我想要的是当链接按钮是clicked div应显示在链接按钮旁边，当使用时也滚动页面div应该与页面移动一起移动。

如果有人可以向我展示一个例子会有很多帮助

谢谢

解决方案

假设你的 DIV 和 LinkBut​​ton 是

 <   asp：linkbutton     runat   =  server < span class =code-attribute>   id   =  lnkShow    text   =  显示Div    onclientclick   = 返回ShowDiv（）;   >  <   / asp：linkbutton  >  
 <   div     id   =  DivToShow    style   =  display：none;位置：固定;填充：3px; -webkit-border-radius：10px; -moz-border-radius：10px; border-radius：10px;边框：1px固体; z-index：50000;宽度：自动;后台：＃d3e499; >  
 div的内容
 <   / div  >  

然后在下面添加javascript / jQuery代码到您的页面以获取DIV显示的位置

  var  mouseX =  0 ; 
  var  mouseY =  0 ; 

< blockquote>（ document ）。ready（ function （）{

（ document ）。mousemove（ function （event）{
mouseX = 数学 .round（event.clientX）;
mouseY = 数学 .round（event.clientY + 15 ）;
}）;
}）;
function ShowDiv（）{

Hello there
I am looking for a way to display a div on a linkbutton is clicked and the div should be next to the link button when it display
what i have got is the css applied to div is

. Bag div.MultibuyModal
{
/*border:8px solid #a1a1a1;*/
background-color:  #FFFFFF;
width: 340px; 
padding-left:30px;
padding-top:5px; 
height:150px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;  
overflow-y:scroll;
position:fixed;
top: 75%;
left: 50%;   
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 10px solid rgb(100, 100, 100); /* default color */
border: 10px solid rgba(0, 0, 0, 0.1);  /*rgba for transparency */
}

but the issue with the above css is dive is always on the fixed position what i want is the when the linkbutton is clicked div should display next to the link button and when use scroll the page div also should move along with the page move.
if some one could show me a example would be much help full
thanks

解决方案

Hi,
Assuming your DIV and LinkButton are

<asp:linkbutton runat="server" id="lnkShow" text="Show Div" onclientclick="return ShowDiv();" ></asp:linkbutton>
<div id="DivToShow" style="display: none; position: fixed; padding: 3px; -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px; border: 1px solid; z-index: 50000; width: auto; background: #d3e499;">
    Content of the div
</div>

and then add below javascript/jQuery code to your page to get the position where the DIV to show

var mouseX = 0;
   var mouseY = 0;

(document).ready(function () {

(document).mousemove(function (event) { mouseX = Math.round(event.clientX); mouseY = Math.round(event.clientY + 15); }); }); function ShowDiv() {

这篇关于在相对位置显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！