4

4 ～ 5 個の異なるモーダルが関連付けられたページがあります。それぞれに一意の #value (obv) があります。これらの個々のモーダルに外部ソース (この場合は HTML メール) からリンクする方法を見つけようとしています。

例えば：

電子メールの「道順を見るにはここをクリック」は -->> www.myurl.com/#directions にリンクする必要があります

#directions ピースは、ページの読み込み時に : 関数をトリガーし、モーダルを自動的に開く必要があります。

これは可能ですか、それとも私は夢を見ているだけですか?

4

3 に答える 3

9

hastag を使用して、表示するコンテンツを決定できます。例えば、

JS

$(document).ready(function () {
    var target = document.location.hash.replace("#", "");
    if (target.length) {
        if(target=="option1"){
          showModal("title1","content1");
        }
        else if(target=="option2"){
            showModal("title2","content2");
        }
    }else{
        showModal("no title","no content");
    }

    function showModal(title,content){
        $('#myModal .modal-title').html(title);
        $('#myModal .modal-body').html(content);
        $('#myModal').modal('show');
    }

});

HTML - ブートストラップ モーダル コード

<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" id="myModalLabel">Modal title</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 -->

これにより、option1 のコンテンツが表示されます

http://jsfiddle.net/fFcS2/show/#option1

これにより、option2 のコンテンツが表示されます

http://jsfiddle.net/fFcS2/show/#option2

コード

http://jsfiddle.net/fFcS2

于 2013-11-09T10:39:08.230 に答える