LoginSignup
10
9

More than 5 years have passed since last update.

Twitter Bootstrap Modalを移動(drag)したい

Last updated at Posted at 2014-04-18

Twitter Bootstrap Modalを移動(drag)したい

一番手軽に実現できたjQuery UIのdraggableを使います。

1.まずGemfileに追加。

gem 'jquery-ui-rails'

2.bundle install実行。

$ bundle install

3.app/assets/javascripts/application.jsに次の行を追加。

//= require jquery.ui.all

4.実装

view例:

app/view/common/index.html.erb

    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" href="show">Show Modal</a>

    <div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            loadling...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

myModalのmodal-dialog全体をdraggableにする場合、次の設定を追加します。

app/assets/javascripts/common.js.coffee

    $("#myModal").draggable({
        handle: ".modal-dialog"
    })

modal-body内にスクロールバーがつくような場合は、
さらにその内側のタグをdraggableに設定する方が良いです。

(ブラウザによってはスクロールバーの制御とdraggableの制御が競合し、
例えばスクロールバーをドラッグすると同時にmodalも移動されたりします)

10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
9