在鼠标位置打开模态
Open modal on mouse position
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
function fe(item, index){
item.addEventListener("click", function(){
item.querySelector('.modal').classList.toggle('show');
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position:relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
top: 100%;
right: 0;
background: #4977d0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
在上面的代码片段中，如果你点击任何项目，那么它会在右侧显示一个modal。如您所见，item 3 的宽度更大。因此，如果您单击 item 3，则必须 scroll-right 才能查看模态。
所以我想在鼠标点击位置显示模态。
我该怎么做？
您可以动态更改样式并获取控制器的位置 X，然后使用 JS 代码添加样式。
另外，从模态 class
中删除右边的 0
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
function fe(item, index){
item.addEventListener("click", function(e){
item.querySelector('.modal').style.left = e.clientX + "px";
item.querySelector('.modal').classList.toggle('show');
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position:relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
top: 100%;
background: #4977d0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
至少有两个选项
- 第一个将使用 JS 直接在鼠标位置生成模态
- 第二个将在左侧生成模态框。这可以使用 CSS
来实现
第一个选项
所以基本上你可以获取鼠标位置并为其设置模态位置。
详细地从 CSS 中的模态 class 中删除 top/left/right/bottom 属性（不需要它们）并添加一些 JS 行。
如果你想围绕鼠标光标对齐模态，请在评论中写信给我......这只是几个数字。
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
var mousePos = {};
function fe(item, index){
item.addEventListener("click", function(e){
var rect = e.target.getBoundingClientRect(); // get some poition, scale,... properties of the item
mousePos.x = e.clientX - rect.left; // get the mouse position relative to the element
mousePos.y = e.clientY - rect.top;
item.querySelector('.modal').classList.toggle('show');
item.querySelector('.modal').style.left = mousePos.x + "px"; // set the modal position to the last stored position
item.querySelector('.modal').style.top = mousePos.y + "px";
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position: relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
background: #4977d0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
第二个选项
第二个选项使用基本 CSS 在左侧对齐模态框 - 它更容易实现，您只需从模态框中删除 left/right/top/bottom 属性 class 并添加 left:0:
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
var mousePos = {};
function fe(item, index){
item.addEventListener("click", function(e){
item.querySelector('.modal').classList.toggle('show');
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position: relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
background: #4977d0;
left: 0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
希望我能帮到你 :D
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
function fe(item, index){
item.addEventListener("click", function(){
item.querySelector('.modal').classList.toggle('show');
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position:relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
top: 100%;
right: 0;
background: #4977d0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
在上面的代码片段中，如果你点击任何项目，那么它会在右侧显示一个modal。如您所见，item 3 的宽度更大。因此，如果您单击 item 3，则必须 scroll-right 才能查看模态。
所以我想在鼠标点击位置显示模态。 我该怎么做？
您可以动态更改样式并获取控制器的位置 X，然后使用 JS 代码添加样式。
另外，从模态 class
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
function fe(item, index){
item.addEventListener("click", function(e){
item.querySelector('.modal').style.left = e.clientX + "px";
item.querySelector('.modal').classList.toggle('show');
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position:relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
top: 100%;
background: #4977d0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
至少有两个选项
- 第一个将使用 JS 直接在鼠标位置生成模态
- 第二个将在左侧生成模态框。这可以使用 CSS 来实现
第一个选项
所以基本上你可以获取鼠标位置并为其设置模态位置。 详细地从 CSS 中的模态 class 中删除 top/left/right/bottom 属性（不需要它们）并添加一些 JS 行。 如果你想围绕鼠标光标对齐模态，请在评论中写信给我......这只是几个数字。
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
var mousePos = {};
function fe(item, index){
item.addEventListener("click", function(e){
var rect = e.target.getBoundingClientRect(); // get some poition, scale,... properties of the item
mousePos.x = e.clientX - rect.left; // get the mouse position relative to the element
mousePos.y = e.clientY - rect.top;
item.querySelector('.modal').classList.toggle('show');
item.querySelector('.modal').style.left = mousePos.x + "px"; // set the modal position to the last stored position
item.querySelector('.modal').style.top = mousePos.y + "px";
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position: relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
background: #4977d0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
第二个选项
第二个选项使用基本 CSS 在左侧对齐模态框 - 它更容易实现，您只需从模态框中删除 left/right/top/bottom 属性 class 并添加 left:0:
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
var mousePos = {};
function fe(item, index){
item.addEventListener("click", function(e){
item.querySelector('.modal').classList.toggle('show');
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position: relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
background: #4977d0;
left: 0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
希望我能帮到你 :D