如何在模态主体中传递多个data-id [英] how to pass multiple data- id in a modal body

问题描述

假设我有多个订单ID

Suppose I have multiple order id

$order_id='12345566778';
$prod_id='126778899';
$sell_id='373462562363';

当我选择特定的orderid时，我希望它传递到弹出窗口的模式主体下的php变量中，让我知道该怎么做

While I select particular orderid I want it to pass in php variable which is under the modal body of popup let me know how to do it I am struggling with this

<a rel="dialog" data-toggle="modal" data-id="<?=$order_id?>" href="#mymodal" data-target="#myModal" >
    <?php echo "<br> $order_id </br>";?>
</a>

<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-label="Close">
                    <span aria-hidden="true">×</span>
                </button>

                <table class="table table-hover table-bordered" >
                    <tr style=" background-color:#00AAAD; color:#FFF; ">
                        <div class="modal-body">

                            i want to get that order id under php variable which i select           
                            here i want to display the data
                        </div>
                    </tr>
                </table>
            </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>

推荐答案

您可以使用jQuery.data()方法执行此操作.尝试这种方式:

You can use jQuery.data() method to do this. Try this way:

HTML代码

<a class="open-my-modal" rel="dialog" data-toggle="modal" data-id="<?=$order_id?>" data-prod-id="<?=$prod_id?>" data-sell-id="<?=$sell_id?>" href="#mymodal" data-target="#myModal" >
    <?php echo "<br> $order_id </br>";?>
</a>

<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-label="Close">
                    <span aria-hidden="true">×</span>
                </button>

                <table class="table table-hover table-bordered" >
                    <tr style=" background-color:#00AAAD; color:#FFF; ">
                        <div class="modal-body">

                            <div id='order-id'></div>
                            <div id='prod-id'></div>
                            <div id='sell-id'></div>
                        </div>
                    </tr>
                </table>
            </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>

jQuery代码

$(document).ready(function () {             
    $('.open-my-modal').click(function(){
        $('#order-id').html($(this).data('id'));
        $('#prod-id').html($(this).data('prod-id'));
        $('#sell-id').html($(this).data('sell-id'));

         // show Modal
         $('#myModal').modal('show');
    });
});

这篇关于如何在模态主体中传递多个data-id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！