web-dev-qa-db-ja.com

リモートURLのBootstrap v3モーダルを開くJquery

BootstrapモーダルDIVで開く必要がある内部ページへのリンクのページがあります。問題は、jQuery v2.1.4とBootstrap v3の最新バージョンを使用することは、この方法でコンテンツをロードする際に機能しないように見えることです。 Bootstrapを使用したモーダルの作成と、リモートコンテンツの段階的な廃止について読んだチュートリアルがたくさんあります。しかし、jQueryを使用してこの機能を使用するかどうかを決定する必要があります。

理論は、クリックすると

<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>

data-load-remoteのコンテンツは読み取られ、クラスmodal-bodyでdivに注入されることになっています。

<div id="myModal" 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>
                <h4 class="modal-title">Event</h4>
            </div>
            <div class="modal-body">
                <p>Loading...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
    </div>
</div>

ただし、jQuery v2.1.4とBS v3.3 +でこの例を試すと、背景が灰色のモーダルウィンドウが開きますが、モーダルウィンドウのスタイルはすべて失われます。つまり、モーダルボディdivのみが表示されるように見えますが、モーダルフッターdivのモーダルヘッダー、きれいなモーダルフレーム、下部ボタンはまったく表示されません。ボックスを閉じる唯一の方法は、モーダルボックスの外側をクリックすることです。 partial modal window

この方法でリモートURLを開く方法についての例を見つけましたが、それらはすべて、使用しているバージョンではなく、古いバージョンのブートストラップを使用しています。誰かがこれにいくつかの光を当てることができますか？

jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal
25
vanarie

基本的に、jqueryでできることは、 load function を使用してhref属性をロードすることです。このようにして、<a>タグでURLを使用し、それをmodal-bodyにロードできます。

<a  href='/site/login' class='ls-modal'>Login</a>

//JS script
$('.ls-modal').on('click', function(e){
  e.preventDefault();
  $('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
});
41
Kijan Maharjan

Bootstrapのドキュメントremoteオプションについて;

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

リモートURLが提供される場合、コンテンツはjQueryのloadメソッドを介して一度ロードされ、.modal-content divに注入されます。 data-apiを使用している場合は、代わりにhref属性を使用してリモートソースを指定することもできます。この例を以下に示します。

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

これは.modal-contentではなく、.modal-body divです。 .modal-body内にコンテンツを配置する場合は、カスタムjavascriptを使用する必要があります。

したがって、私は jQuery.load をプログラムで呼び出します。つまり、必要に応じて、閉じるボタンや他のボタンの機能を維持できます。

これを行うには、モーダルを開くボタンのURLでデータタグを使用し、show.bs.modalイベントを使用してコンテンツを.modal-body divにロードします。

HTMLリンク/ボタン

<a href="#" data-toggle="modal" data-load-url="remote.html" data-target="#myModal">Click me</a>

jQuery

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});
14
worldofjr

e.relatedTarget.data('load-url');は機能しません
use dataset.loadUrl

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = e.relatedTarget.dataset.loadUrl;
    $(this).find('.modal-body').load(loadurl);
});
1
Kuzma

Javascriptから離れたphpを使用した同じ問題に対する異なる視点：

<a data-toggle="modal" href="#myModal">LINK</a>

<div class="modal fade" tabindex="-1" aria-labelledby="gridSystemModalLabel" id="myModal" role="dialog" style="max-width: 90%;">
    <div class="modal-dialog" style="text-align: left;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <?php include( 'remotefile.php'); ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

そして、remote.phpファイルに基本的なHTMLソースを入れます。

1
Dan

JQueryで@worldofjrの回答を使用すると、エラーが発生します。

e.relatedTarget.dataは関数ではありません

あなたが使用する必要があります：

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});

$(..)でラップされている場合、e.relatedTargetではありません

最新のBootstrap 3でエラーが発生していましたが、この方法を使用した後は問題なく動作しています。

0
Marcin Nabiałek

Bootstrap-3.3.7.jsには、次のコードが表示されます。

if (this.options.remote) {
  this.$element
    .find('.modal-content')
    .load(this.options.remote, $.proxy(function () {
      this.$element.trigger('loaded.bs.modal')
    }, this))
}

したがって、bootstrapは、リモートコンテンツを<div class="modal-content">要素に置き換えます。これは、フレームワークによるデフォルトの動作です。そのため、問題はリモートコンテンツ自体にあり、仕様により<div class="modal-header">、<div class="modal-body">、<div class="modal-footer">を含む必要があります。

0
M Kaweepatt Churcharoen