rialsでbootstrapのmodalダイアログボックスを使用して、ポップアップウィンドウに多層コンテンツを表示する方法を実装します.

6467 ワード

ブックストリーム Rails modal ダイアログ

rialsでbootstrapのmodalダイアログボックスを使用して、ポップアップウィンドウに多層コンテンツを表示する方法を実装します.
適用シーン:メインインタフェースにボタンがあり、クリックするとポップアップウィンドウが表示され、ユーザーリストです.リストの1つのレコードを再度クリックし、この弾窓にこのユーザーの詳細を表示します.

メインコントロールインタフェースにbootstapのmodalダイアログボックスdivを追加します.

を使います.

<%= render :partial => "modal/modal" %>

この方法は、共通ビュー2を埋め込む.このmodalは公開表示用なので実質的なUIコンテンツはありません.コードは次のとおりです.

<%= stylesheet_link_tag "modal/modal" %>
<%= javascript_include_tag "modal/modal" %>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width:800">
    <div class="modal-content" id="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"></h4>
      </div>
      <div class="modal-body">

      </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 -->

メインコントロールインタフェースでjavascriptを使用してこのモードウィンドウを開きます.次のコードはjs coffeeのコードです.buttonのonClick応答によって呼び出されるjsコード

である.

window.fun_match_info_list = () ->
    $('#myModal').modal({backdrop:'static'});
    $('#myModalLabel').html('    ');        $('#embed_ifame').attr('src',"/match_info_list_by_current_user");

の全体的な考え方は、1つのmodalにiframeを埋め込むことです.すべてのrails controllerがレンダリングした戻り内容は、このiframeに戻ります.これで一級htmlはレンダリングされません.

同時に、このmodal弾窓のために、いずれかのviewの内容が表示される.ifameでrails controllerのrenderコンテンツを収容するほか,既存のコンテンツの削除や新しいコンテンツの追加も行わなければならない.これはjavascriptのdomオブジェクト操作でhtmlを処理します.jsコードは以下の通り:

$('#myModal').on('hidden.bs.modal', function (e) {
        //             
        $("#embed_ifame").remove();
    }).on('show.bs.modal', function (e) {
        //             
        iframe_html_string = '<iframe id="embed_ifame" width="100%" height="100%" scrolling="no" style="overflow-x:none;overflow-y:none"/>';
        $("#myModal .modal-body").append(iframe_html_string);
    })

c/c++テーマまとめ

gulpでCSSの差分ビルド