title: jquery VirtualKeyboard incorrect position
body: <p>I'm using the <a href="https://github.com/Mottie/Keyboard" rel="nofollow noreferrer">Mottie/Keyboard</a> plugin and I'm having problems while positioning the keyboard.
  The images sums it up what I want and what's happening.</p>
  
  <p><a href="https://i.stack.imgur.com/GULve.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GULve.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the keyboard always goes to the TOP-LEFT of the screen no matter what I do.</p>
  
  <p>You can also see that I'm using a modal, however the same behavior happens to all inputs no matter if on a modal or not. </p>
  
  <p>In this case, I would like the keyboard to happear below the modal.</p>
  
  <pre><code>$('#quantity-input').keyboard(
  {
      layout  : 'num',
      usePreview: false,
      restrictInput: false,
      preventPaste: true,
      autoAccept: true,
        position     : {
          // optional - null (attach to input/textarea) or a jQuery object
          // (attach elsewhere)
          of : $('.modal'),
          my : 'center bottom',
          at : 'center bottom',
          // used when "usePreview" is false
          // (centers keyboard at bottom of the input/textarea)
          at2: 'center bottom'
        },
  }); 
  </code></pre>
  
  <p>I've also tried to change the position property <code>of</code> to other elements such as:</p>
  
  <pre><code>$(window)
  $(this)
  $('#quantity-input')
  $('body')
  </code></pre>
  
  <p>And nothing works.
  My CSS and JS files are the following:</p>
  
  <pre><code>bootstrap.min.css
  bootstrap.min.js
  keyboard.min.css
  jquery-wijmo.css
  bootstrap.min.js
  keyboard.min.js
  </code></pre>
  
  <p><strong>EDIT</strong>: 
  You can see the problem on <a href="https://jsfiddle.net/3cfyjhgw/" rel="nofollow noreferrer">JSFiddle</a>.</p>