如何使用键盘箭头键移动引导模式弹出式菜单
问题描述:
我在此处使用Bootstrap的默认模式弹出式菜单,使用JQuery UI可拖动功能,如以下代码中所示,代码如下:JS fiddle。如何使用键盘箭头键移动引导模式弹出式菜单
$(document).ready(function() {
$("#btnTest").click(function() {
$('.modal').modal({
keyboard: false,
show: true
});
// Jquery draggable
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
});
.modal-header {
cursor: move;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<div>
<h4>
Draggable Modal Demo by Vibs
</h4>
<input type="button" id="btnTest" value="Show Popup" />
</div>
有人可以帮我实现的功能,这将让我通过向上/下/左/右的键盘上的方向键移动模式弹出?
答
$(document).ready(function() {
$("#btnTest").click(function() {
$('.modal').modal({
keyboard: false,
show: true
});
// Jquery draggable
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
$(document).keydown(function(e){
switch (e.which){
case 37: //left arrow key
$(".modal-dialog").finish().animate({
left: "-=50"
});
break;
case 38: //up arrow key
$(".modal-dialog").finish().animate({
top: "-=50"
});
break;
case 39: //right arrow key
$(".modal-dialog").finish().animate({
left: "+=50"
});
break;
case 40: //bottom arrow key
$(".modal-dialog").finish().animate({
top: "+=50"
});
break;
}
});
});
.modal-header {
cursor: move;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<div>
<h4>
Draggable Modal Demo by Vibs
</h4>
<input type="button" id="btnTest" value="Show Popup" />
</div>
非常感谢。尽管有一件事我不能理解,即“左:” - = 50“'?你能解释一下为什么它在报价中,以及它在理论上如何工作? – vibs2006
@ vibs2006因为对于animate()方法,所有的属性名称必须是驼峰式的,值应该在引号内。 “ - = 50”它被称为相对值(相对于元素的当前值)。这是通过将+ =或 - =放在值的前面来完成的。 –