单击以在单击的位置打开 div答案

【问题标题】：Click to open div in position clicked单击以在单击的位置打开 div
【发布时间】：2019-10-04 20:00:11
【问题描述】：

所以我有一个简单的问题，我不知道如何解决。

我有一个简单的表格，列中有一些按钮用作过滤器，当您单击其中一个按钮时，它会打开一个表单。

我需要的是当你点击一个按钮时，这个表单应该出现在这个按钮的坐标中，我试图获取按钮的坐标并用这个坐标编辑表单，但它不起作用。

我尝试这样做是为了测试

document.getElementById('myForm').style.top = "100px;";

但不工作。

这是表格

<div class="form-popup" id="myForm">
    <div class="form-container">
        <h1 id="filtername">Filter</h1>
        <div class="row">
            <div class="col-6">
                <label>Set minimun</label><input id="mininfilter" class="form-control" type="number" value="0">
            </div>
            <div class="col-6">
                <label>Set maximun</label><input id="maxfilter" class="form-control" type="number" value="0">
            </div>
        </div>
        <br>
        <button type="button" id="filtersave" class="btn">Apply</button>
        <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
        <button type="button" id="back_to_normal" class="btn warning"><i class="material-icons">
            autorenew
            </i></button>
    </div>
</div>

这是css

.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 0;
border: 3px solid #f1f1f1;
z-index: 9;

}

谢谢大家！

【问题讨论】：

您是否在单击按钮时显示表单？
是的，我也在使用 jquery
在 css 中尝试position: absolute;。删除 bottom: 0; 和 right: 0; 选项

标签： javascript jquery css bootstrap-4

【解决方案1】：

https://codepen.io/SachinJerom/pen/zYYOorM

我们可以为此使用引导模式。检查给出的链接。您可以使用样式自定义表单。` 过滤器

        <br>

    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <label>Set minimun</label><input id="mininfilter" class="form-control" type="number" value="0">


            <label>Set maximun</label><input id="maxfilter" class="form-control" type="number" value="0">

        <button type="button" id="filtersave" class="btn">Apply</button>
        <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
        <button type="button" id="back_to_normal" class="btn warning"><i class="material-icons">
                autorenew
            </i></button>
    </div>
</div>
</div>`

【讨论】：

这是一个很好的方法，但我的客户不想要这样的东西，他想要我之前说的，但我以后会用这个
(codepen.io/SachinJerom/pen/JjjPBjY) 试试这个。检查它是否对你有用。！

【解决方案2】：

所以我所做的就是获取 div：

var divform = document.getElementById("myForm").style;

并在按下按钮时获取 Y 轴和 X 轴

var x = event.clientX;
var y = event.clientY;

然后当你得到这个变量时，我只是修改表单的坐标

divform.top = y + "px";
divform.left = x + "px";

【讨论】：