増田itter: 「お待ちください」ウィンドウを角丸に

RAILS

http://storehouse.quickvps.net/masudaitter/

こちらの角丸ライブラリを使わせてもらった。

ヘルパー

  def rounded_rectangle(options = {}, &block)
    concat(<<-EOS, block.binding)
      #{tag(:div, options, true)}
        <div style="font-size:1px; height:5px; background:url(#{image_path 'curve-left-head.gif'}) top left no-repeat;">
          <div style="font-size:1px; height:5px; background:url(#{image_path 'curve-right-head.gif'}) top right no-repeat;"></div>
        </div>
        #{capture(&block)}
        <div style="font-size:1px; height:5px; background:url(#{image_path 'curve-left-bottom.gif'}) bottom left no-repeat;">
          <div style="font-size:1px; height:5px; background:url(#{image_path 'curve-right-bottom.gif'}) bottom right no-repeat;"></div>
        </div>
      </div>
    EOS
  end

ビュー

...
<script type="text/javascript">
  function show_wait_message() {
    var wait_message_window = $('wait_message_window');
    var width = parseInt(Element.getStyle(wait_message_window, 'width'));
    var height = parseInt(Element.getStyle(wait_message_window, 'height'));
    var clientWidth = parseInt(document.body.clientWidth);
    var clientHeight = parseInt(document.body.clientHeight);
    var _top = (clientHeight - height) / 2;
    var _left = (clientWidth - width) / 2;
    Element.setStyle(wait_message_window, { top: (_top + 'px'), left: (_left + 'px') });
    Element.show(wait_message_window);
  }
  function hide_wait_message() {
    Element.hide('wait_message_window');
  }
</script>
</head>
<body>
<% rounded_rectangle :id => 'wait_message_window', :style => 'width:240px; height:100px; z-index:1; position:absolute; background-color:#EDF1FD; display:none;' do -%>
  <table style="width:100%; height: 90px;">
    <tbody>
      <tr align="center" valign="middle">
        <td>
          <%= image_tag 'ajax-loader.gif' %>
          しばらくお待ちください...
        </td>
      </tr>
    </tbody>
  </table>
<% end -%>
...