複数のボタンで同じモーダルを使い回す場合の実装例

複数行出力させないといけないページで、それぞれの行にモーダル表示のボタンを配置したいが、モーダルのコードは１個にしたい時の実装例

EC-CUBEで規格・カテゴリ・配送方法などの一覧画面で項目削除ボタンにモーダルを配置したのでその時の実装が以下

{% block javascript %}
    <script>
        $(function() {
            // 削除モーダルのhref変更
            $('#delete_modal').on('shown.bs.modal', function(event) {
                var target = $(event.relatedTarget);
                $(this).find('[data-method="delete"]').attr('href', target.data('url'));
            });
        });
    </script>
{% endblock %}

{% block main %}

<!-- 省略 -->

<div>
    <ul>
        {% for Category in Categories %}
        <li>
            {% if Category.id != TargetCategory.id %}

            <!-- 項目の出力 -->

            <a class="btn btn-ec-actionIcon" data-toggle="modal" data-target="#delete_modal" data-url="{# ここに削除のためのURLを出力 #}">
                <i class="fa fa-close fa-lg text-secondary"></i>
            </a>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
    <div class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-labelledby="delete_modal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <!-- モーダルの内容の出力 -->

                <a href="#" class="btn btn-ec-delete" data-confirm="false" data-method="delete">
                    削除
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 省略 -->

{% endblock %}

該当のプルリクはこちら