如何使用键盘箭头键移动引导程序模态弹出窗口

Question

我在这里使用Bootstrap的Default Modal Popup和JQuery UI Draggable Function，如下面的代码所示 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">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>One fine body&hellip;</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>

有人可以帮我启用功能，让我通过UP / DOWN / LEFT / RIGHT的键盘箭头键移动模态弹出窗口吗？

Answer 1

$(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">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>One fine body&hellip;</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>