rails_dialog

rails_dialog

rails_dialog is sass mixin for rails to implement a dialog easily. This gem is based on sass-dialog.

Demonstration

You can try how this works here.
(This demonstration is based on sass-dialog version, but works in the same way.)

Instration

Put these lines in your Gemfile and run the bundle command to install.

gem 'sass-rails'
gem 'compass-rails'
gem 'rails_dialog'

Import rails_dialog. (This is example of application.css.scss)

@import 'compass';
@import 'rails_dialog';

Usage

####HTML

Write nested div tags to express a dialog. Outer one needs a id attribute and a class attribute. In addition, link or button to show dialog is necessary.

<div id="dialog" class="dialog">
  <div>
    <!-- Content in dialog -->
    <h2>Dialog</h2>
    <div>
      <a href="javascript:void(0);" id="hide-link">Hide Dialog</a>
    </div>
  </div>
</div>

<a href="javascript:void(0);" id="show-link">Show Dialog</a>

Sass

Include dialog mixin. You have to specify width and height of dialog as parameters.

.dialog {
  @include dialog(700px, 400px);
}

Coffeescript

Javascript shows and hides the dialog.

$ ->
  $('#show-link').click ->
    $('#dialog').show()

  $('#hide-link').click ->
    $('#dialog').hide()