キーボードの矢印キーを使用してブートストラップモーダルポップアップを移動する方法

Question

ここでは、ブートストラップのデフォルトモーダルポップアップを、以下のコードで示すように、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>