Bootstrap模态框：从触发元素获取数据标识并填充隐藏字段

<!-- 多个触发模态框的 div 示例 -->
<div class="col-lg-6 col-md-6 col-sm-12 mb-4">
    <div class="card">
        <div class="card-body b-primary">
            <div class="row justify-content-center">
                <div class="col-md-5 col-sm-12">
                    <img src="assets/images/gateway/61eedfd72289f1643044823.jpg" class="card-img-top w-100" alt="Stripe">
                </div>
                <div class="col-md-7 col-sm-12">
                    <ul class="list-group text-center">
                        <li class="list-group-item">Stripe</li>
                        <li class="list-group-item">Limit : 50- 50000 USD</li>
                        <li class="list-group-item"> Charge - 0 USD+ 0% </li>
                        <li class="list-group-item">
                            <!-- 注意这里的 data-id="str" -->
                            <button type="button" data-id="str" data-base_symbol="" class="btn deposit cmn-btn w-100" data-toggle="modal" data-target="#exampleModal">
                                Deposit
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 另一个支付方式的卡片 -->
<div class="col-lg-6 col-md-6 col-sm-12 mb-4">
    <div class="card">
        <div class="card-body b-primary">
            <div class="row justify-content-center">
                <!-- ... 其他内容 ... -->
                <li class="list-group-item">
                    <!-- 注意这里的 data-id="paypal" -->
                    <button type="button" data-id="paypal" data-base_symbol="" class="btn deposit cmn-btn w-100" data-toggle="modal" data-target="#exampleModal">
                        Deposit
                    </button>
                </li>
                <!-- ... 其他内容 ... -->
            </div>
        </div>
    </div>
</div>

<!-- 模态框结构 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-content-bg">
            <div class="modal-header">
                <strong class="modal-title method-name text-white" id="exampleModalLabel">Input Deposit Amount</strong>
                <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </a>
            </div>
            <form action="{{ route('deposit_request') }}" method="post" class="register">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <!-- 隐藏输入字段，用于接收 data-id -->
                        <input type="hidden" name="method_code" class="edit-method-code" value="">
                        <!-- ... 其他表单内容 ... -->
                    </div>
                    <div class="form-group">
                        <label>Enter Amount:</label>
                        <div class="input-group">
                            <input id="amount" type="text" class="form-control form-control-lg" name="usdamt" placeholder="0.00" required="" autocomplete="off">
                            <div class="input-group-prepend">
                                <span class="input-group-text currency-addon addon-bg">USD</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-md btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn-md cmn-btn">Next</button>
                </div>
            </form>
        </div>
    </div>
</div>

$(document).ready(function() {
    // 监听模态框的 show.bs.modal 事件
    $('#exampleModal').on('show.bs.modal', function (event) {
        // event.relatedTarget 是触发模态框打开的 DOM 元素
        var button = $(event.relatedTarget); 

        // 从触发按钮获取 data-id 属性值
        var dataId = button.data('id'); 

        // 将获取到的 data-id 填充到模态框内的隐藏输入字段
        // 这里的 .edit-method-code 是隐藏输入字段的 class
        var modal = $(this);
        modal.find('.edit-method-code').val(dataId);

        console.log("Modal opened by:", dataId); // 可以在控制台查看效果
    });
});