如何将光标放在文本区域中时弹出模态

Question

我有一个小的文本区域，当用户将光标放在其中时，我希望一个模态作为此文本区域的较大版本弹出。 我准备了所有代码，但找不到将光标放在文本区域中以填充模态的部分。

文本区域 ：

<textarea href ="#s-fb" class="form-control" name="sfb" id="sfb" rows="2" value="" placeholder="We would appreciate your feedback to improve the website"></textarea>

模 态：

<div class="modal fade" tabindex="-1" role="dialog" id="s-fb">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
...
...

Answer 1

请尝试这个。

$('#sfb').click(function(){
$('#s-fb').modal('show')
})

希望这有帮助。

Answer 2

使用 onmouseover 事件可在鼠标悬停在文本区域上时触发事件。onmouseover="showModal()"

function showModal(){
document.getElementById('s-fb').style.display = 'block';
}

Answer 3

您希望将onmouseover函数用于文本输入。 这样的东西会起作用：

<input type="text" onmouseover="$('#exampleModal').modal('show')">

<!-- Modal -->
<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">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>