web-dev-qa-db-ja.com

リモートモーダル付きブーツストラップ3

私は新しいTwitter Bootstrapリリースで新しいプロジェクトを始めたばかりです：bootstrap3。モーダルをリモートモードで動作させることはできません。リンクをクリックすると、リモートURLの内容を含むモーダルが表示されます。それは機能しますが、モーダルレイアウトは完全に破壊されています。

これがjsfiddleへのリンクです： http://jsfiddle.net/NUCgp/5/

コード ：

<a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-target="#myModal">Click me !</a>

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

            </div>
            <div class="modal-body"><div class="te"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

誰でもこの簡単な例を動かすことができますか？

twitter-bootstrapmodal-dialog
67
user2707039

モーダルのリモートオプションに関しては、 the docs から：

リモートURLが指定された場合、コンテンツはjQueryのloadメソッドを介してロードされ、 がモーダル要素 のルートに挿入されます。

つまり、リモートファイルは、本体に表示したいものだけではなく、完全なモーダル構造を提供する必要があります。

ブートストラップ3.1アップデート：

V3.1では上記の動作が変更され、リモートコンテンツが.modal-contentにロードされるようになりました

これを参照してくださいデモフィドル

Boostrap 3.3アップデート：

このオプションはv3.3.0から非推奨となり、v4で削除されました。 代わりに、クライアントサイドのテンプレートまたはデータバインディングフレームワークを使用するか、 jQuery.load を自分で呼び出すことをお勧めします。

108
koala_dev

ブートストラップ3用

対処しなければならなかったワークフローは、変更可能なURLコンテキストを使用してコンテンツをロードすることでした。そのため、デフォルトでは、表示したいデフォルトのコンテキストに対してjavascriptまたはhrefを使用してモーダルを設定します。

$('#myModal').modal({
        show: false,
        remote: 'some/context'
});

私は同じリモートからロードしていなかったので、モーダルを破棄しても私にはうまくいかないでしょう。

$(".some-action-class").on('click', function () {
        $('#myModal').removeData('bs.modal');
        $('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
        $('#myModal').modal('show');
});

もちろんこれは簡単にjsライブラリにリファクタリングされ、モーダルをロードすることであなたに多くの柔軟性を与えます

私はこれが15分のいじるの手間を省くことを願っています。

28
zorkle

完全なモーダル構造を送信したくない場合は、次のようにして古い動作を複製できます。

// this is just an example, remember to adapt the selectors to your code!
$('.modal-link').click(function(e) {
    var modal = $('#modal'), modalBody = $('#modal .modal-body');

    modal
        .on('show.bs.modal', function () {
            modalBody.load(e.currentTarget.href)
        })
        .modal();
    e.preventDefault();
});
18
MM.

これが私の（上のいくつかを活用した）解決策です。これはBS3自身の構造を利用して古いリモートローディングの振る舞いを再現します。それはシームレスであるべきです。

理解しやすいように、コード変数は重く記述的なものにしておきます。私はJQueryの存在も想定しています。 Javascriptのヘビーリフター型は手軽にコードを合理化します。

参考までに、BS3モーダルを呼び出すリンクです。

<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li>

Youre Javascriptでは、次のものが必要になります。

// Make sure the DOM elements are loaded and accounted for
$(document).ready(function() {

  // Match to Bootstraps data-toggle for the modal
  // and attach an onclick event handler
  $('a[data-toggle="modal"]').on('click', function(e) {

    // From the clicked element, get the data-target arrtibute
    // which BS3 uses to determine the target modal
    var target_modal = $(e.currentTarget).data('target');
    // also get the remote content's URL
    var remote_content = e.currentTarget.href;

    // Find the target modal in the DOM
    var modal = $(target_modal);
    // Find the modal's <div class="modal-body"> so we can populate it
    var modalBody = $(target_modal + ' .modal-body');

    // Capture BS3's show.bs.modal which is fires
    // immediately when, you guessed it, the show instance method
    // for the modal is called
    modal.on('show.bs.modal', function () {
            // use your remote content URL to load the modal body
            modalBody.load(remote_content);
        }).modal();
        // and show the modal

    // Now return a false (negating the link action) to prevent Bootstrap's JS 3.1.1
    // from throwing a 'preventDefault' error due to us overriding the anchor usage.
    return false;
  });
});

私たちはそこにいます。あなたがしたいと思うかもしれない1つの事は長い内容がスクロールするように最大高さでモーダルボディをスタイルすることです。

あなたのCSSでは、次のものが必要になります。

.modal-body{
    max-height: 300px;
    overflow-y: scroll;
}

参考までに、モーダルのHTMLを含めます。これは、これまでに見たことのあるすべてのBootsrap Modal Exampleをまとめたものです。

<div id="terms" class="modal fade">
  <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>
        <h3 id="termsLabel" class="modal-title">TERMS AND CONDITIONS</h3>
      </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 -->
14
TheAdventurist

これは私がしました：

$('#myModal').on 'shown.bs.modal', (e) ->  
  $(e.target).find('.modal-body').load('http://yourserver.com/content')
9
MBHNYC

私がBootstrapコードを変更するのを嫌う（アップグレードをより困難にする）のと同じくらい、次のようにmodal.jsのload文に ".find（ '。modal-body'）を追加するだけです。

// original code
// if (this.options.remote) this.$element.load(this.options.remote)

// modified code
if (this.options.remote) this.$element.find('.modal-body').load(this.options.remote)
8
esvendsen

これが私が使っている方法です。ページ上に隠しDOM要素を必要とせず、モーダルパーシャルのhrefを持つアンカータグと 'modalTrigger'のクラスだけが必要です。モーダルが閉じられる（隠される）と、DOMから削除されます。

  (function(){
        // Create jQuery body object
        var $body = $('body'),

        // Use a tags with 'class="modalTrigger"' as the triggers
        $modalTriggers = $('a.modalTrigger'),

        // Trigger event handler
        openModal = function(evt) {
              var $trigger = $(this),                  // Trigger jQuery object

              modalPath = $trigger.attr('href'),       // Modal path is href of trigger

              $newModal,                               // Declare modal variable

              removeModal = function(evt) {            // Remove modal handler
                    $newModal.off('hidden.bs.modal');  // Turn off 'hide' event
                    $newModal.remove();                // Remove modal from DOM
              },

              showModal = function(data) {             // Ajax complete event handler
                    $body.append(data);                // Add to DOM
                    $newModal = $('.modal').last();    // Modal jQuery object
                    $newModal.modal('show');           // Showtime!
                    $newModal.on('hidden.bs.modal',removeModal); // Remove modal from DOM on hide
              };

              $.get(modalPath,showModal);             // Ajax request

              evt.preventDefault();                   // Prevent default a tag behavior
        };

        $modalTriggers.on('click',openModal);         // Add event handlers
  }());

使用するには、モーダルパーシャルのhrefを持つタグを作成するだけです。

<a href="path/to/modal-partial.html" class="modalTrigger">Open Modal</a>
5
Brandon Fitzpatrick

もう1つの優れた簡単な方法は、レイアウトにblind modalを使用し、必要に応じてそれを呼び出すことです。

JS

  var remote_modal = function(url) {
    // reset modal body with a spinner or empty content
    spinner = "<div class='text-center'><i class='fa fa-spinner fa-spin fa-5x fa-fw'></i></div>"

    $("#remote-modal .modal-body").html(spinner)
    $("#remote-modal .modal-body").load(url);
    $("#remote-modal").modal("show");
  }

そしてあなたのHTML

 <div class='modal fade' id='remote-modal'>
    <div class='modal-dialog modal-lg'>
      <div class='modal-content'>
        <div class='modal-body'></div>
        <div class='modal-footer'>
          <button class='btn btn-default'>Close</button>
        </div>
      </div>
    </div>
  </div>
</body>

remote_modal('/my/url.html')を呼び出すだけでコンテンツがモーダルの中に表示されるようになりました

4
huan son

私はこうやっています：

<!-- global template loaded in all pages // -->
     <div id="NewsModal" class="modal fade" tabindex="-1" role="dialog" data-ajaxload="true" aria-labelledby="newsLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 class="newsLabel"></h3>
                    </div>
                    <div class="modal-body">
                            <div class="loading">
                                <span class="caption">Loading...</span>
                               <img src="/images/loading.gif" alt="loading">
                        </div>
                    </div>
                    <div class="modal-footer caption">
                        <button class="btn btn-right default modal-close" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

これが私のhrefです。

<a href="#NewsModal" onclick="remote=\'modal_newsfeed.php?USER='.trim($USER).'&FUNCTION='.trim(urlencode($FUNCTIONCODE)).'&PATH_INSTANCE='.$PATH_INSTANCE.'&ALL=ALL\'
                                        remote_target=\'#NewsModal .modal-body\'" role="button" data-toggle="modal">See All Notifications <i class="m-icon-swapright m-icon-dark"></i></a>
0
yardpenalty