Question

当用户点击某个区域时，我有一个div作为PopUP工作。

根据用户点击div的角落应该出现在不同的位置，因此不会隐藏内容的任何部分。

内容区域
  A B
  C D

因此，如果用户点击A角div应该出现在右下方因此，如果用户点击B角div应该出现左下角因此，如果用户点击C corner div应该出现在右上方因此，如果用户点击D corner div应显示为left和top

正常点击显示C格式，但如果div不适合屏幕，则应该更改

我有来自用户点击的x，y，并且还有div和内容区域大小，所以我可以计算正常格式何时不适合内容。

我是CSS新手我的想法是我应该有4种风格{A，B，C，D}
我的javascript函数会计算出适合的类，并在出现之前进行更改。

那么我应该为样式{A，B，C，D}配置什么属性才能完成呢？

#container{
    width:500px;
    height:500px;
    position:relative;
    border:1px solid black;
}
.box{
    border:1px solid red;
    position:absolute;
    width:100px;
    height:100px;    
}

PD：当然这是我如何解决它的想法，但我也愿意接受建议。

Answer 1

单击div时，将左上角移动到x，y，
如果内容将落在容器外，角落会发生变化。

var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
 
container.addEventListener("click", getClickPosition, false);

function getClickPosition(e) {
    var parentPosition = getPosition(e.currentTarget);  
    
    var xPosition = e.clientX - parentPosition.x ;
    if (xPosition + theThing.clientWidth > contentContainer.clientWidth)
    {
        xPosition = xPosition - theThing.clientWidth;
    }
    var yPosition = e.clientY - parentPosition.y ;
    if (yPosition + theThing.clientHeight > contentContainer.clientHeight)
    {
        yPosition = yPosition - theThing.clientHeight;
    }
    theThing.style.left = xPosition + "px";
    theThing.style.top = yPosition + "px";
}
 
function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
      
    while (element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

body {
    background-color: #FFF;
    margin: 30px;
    margin-top: 10px;
}
#contentContainer {
    width: 200px;
    height: 150px;
    border: 5px black solid;
    overflow: hidden;
    background-color: #F2F2F2;
    cursor: pointer;
}
#thing {
    position: relative;
    left: 50px;
    top: 50px;
    width: 50px;
    transition: left .5s ease-in, top .5s ease-in;
    background-color: red;
}

<div id="contentContainer">
    <div id="thing">Hola<br> World</div>
</div>

Answer 2

很简单。听起来像是微不足道的：

＆＃13;

* {
    margin:0;
    padding:0;
}
div {
    width:50%;
    height:50%;
    display:block;
    position:absolute;
}
.top_left_green{
    background:green;
    left:0;
    top:0;
}
.top_right_red{
    background:red;
    right:0;
    top:0;
}
.bottom_left_blue{
    background:blue;
    left:0;
    bottom:0;
}
.bottom_right_yellow{
    background:yellow;
    right:0;
    bottom:0;
}

＆＃13;

<div class="top_left_green"></div>
<div class="top_right_red"></div>
<div class="bottom_left_blue"></div>
<div class="bottom_right_yellow"></div>

＆＃13;

我如何使div改变位置以适应屏幕

2 个答案: